How to see the full css code in data-styled="active" on a react website

Question

i went to this site which is a react website in there i tried to find the css file it showed me <style data-styled="active" data-styled-version="5.2.1"></style> how can i copy all the css code in the <style data-styled="active" data-styled-version="5.2.1"></style>

i tried to inspect and try to do all the experiments but it didn't show any css i was looking

Answer 1

There is a way to see the CSS generated by the Library.

document.styleSheets instance contain all the CSS Text in the DOM itself (inline, external and generated).

tryout below statement in your console.

Array.from(document.styleSheets).filter(ss => ss.ownerNode !== null && ss.ownerNode !== undefined).filter(ss => ss.ownerNode.getAttribute("data-styled")).filter(ss => ss.cssRules !== undefined && ss.cssRules !== null).forEach(ss => console.log(Array.from(ss.cssRules).map(rule => rule.cssText).reduce((r,v)=>r+v)) )

NOTE: Some webpage won't allow accessing the styleSheet which would throw a SecurityError