检查浏览器时，我在哪里可以找到我在 React 组件中编写的 CSSinJS 样式？

【问题标题】：Where can i find the CSSinJS style i have written in the React component while inspecting browser?检查浏览器时，我在哪里可以找到我在 React 组件中编写的 CSSinJS 样式？
【发布时间】：2020-06-25 12:44:26
【问题描述】：

我创建了一个 react 样式组件，它被融合到下面给出的浏览器中

<a href="#" role="tab" aria-selected="true" class="css-ed5ehc">
  <div class="css-1nrs7xj">
     Implementation
  </div>
</a>

在检查 DOM 树中哪里可以看到类 "css-ed5ehc" 和 css-1nrs7xj 的实际 css 样式？

我可以在检查时在样式选项卡中看到样式，但不确定它来自哪里。它只是显示在开发者工具中

提前致谢

【问题讨论】：

标签： javascript html css reactjs css-in-js

【解决方案1】：

Chrome 网络工具通常会在样式选项卡中显示源自 CSS 规则的文件名。

类似于this answer，也可以在“样式”选项卡中点击文件名。如果您在生产中查看某些内容，您可能需要美化 CSS，如果您说，在本地开发中使用 webpack 等，您可能需要启用源映射。

（也有可能代替文件名，在这种情况下它会显示“inline”。这应该将您重定向到可能是scoped 的 HTML 元素到这个特定的 CSS-in-JS。 )

【讨论】：

这是 JS 中的 CSS，所以没有指向文件的链接。我已经编辑了问题以适应这种情况