React js css 样式表应用于多个组件答案

【问题标题】：React js css stylesheet applied to more than one componentReact js css 样式表应用于多个组件
【发布时间】：2020-10-21 12:41:30
【问题描述】：

我有一个 Parent.js 组件，其中有一个子组件 Child.js。

如果我在 child.css 中定义它：

.example {
  font-family: 'Roboto', sans-serif;
}

为什么我能够在 Parent.js 组件中使用这个 className，尽管没有在 parent.css 中指定它？

【问题讨论】：

这能回答你的问题吗？ How to make React CSS import component-scoped?
您可以分别使用 CSS-in-JS 或 CSS 模块来指定样式。这可能会有所帮助：medium.com/@pioul/modular-css-with-react-61638ae9ea3e

标签： css reactjs

【解决方案1】：

除非您使用唯一的类名、CSS 模块或其他可用于将 CSS 样式限定到 React 中的任何组件的替代方案，否则任何 CSS 文件中指定的样式都将全局应用。

如果您想限制任何组件的样式，请使用 CSS 模块或确保项目中的每个类名都是唯一的。

有关如何使用 CSS 模块的详细信息，请参阅Adding a CSS Modules Stylesheet。您还可以查看 9 Ways To Implement CSS in React JS 以了解其他可用的替代方案。

【讨论】：

【解决方案2】：

我建议使用唯一的类名。例如，假设您有多个 ListView 组件：MemberUsersListView、AdminUsersListView、TestUsersListView；他们每个人都需要不同的风格。我将创建以下 CSS 类：

.MUListView{
  ...
}
.AUListView{
  ...
}
.TUListView{
  ...
}

我知道这看起来很烦人，但它比应用内联样式更简洁，并且更容易在较小的项目中实现。

【讨论】：