如何在React网站中查看data-styled="active"标签内的完整CSS代码

你看到的<style data-styled="active" data-styled-version="5.2.1">是styled-components（React常用的CSS-in-JS库）生成的动态样式标签，它的CSS内容通过JavaScript注入，直接在元素面板可能看不到完整内容，试试以下方法获取：

• 控制台直接提取
  打开浏览器开发者工具控制台（快捷键F12/右键检查→Console），输入以下代码执行：

  const styledStyleTags = document.querySelectorAll('style[data-styled="active"]');
  styledStyleTags.forEach(tag => console.log(tag.textContent));
  

  执行后控制台会输出所有该标签内的CSS代码，直接复制即可。如果只有一个目标标签，也可以用更简短的代码：

  document.querySelector('style[data-styled="active"]').textContent
  

  右键点击输出的内容选择复制。

• 通过Sources面板查找
  打开开发者工具的Sources面板，在左侧Page目录下的top节点里，查找带有styled标识的资源，或者直接按Ctrl+F唤起搜索框，输入具体的样式选择器，定位到动态生成的CSS内容后复制。

内容的提问来源于stack exchange，提问作者jackson hill