React js CSS样式表应用于多个组件

Question

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

• Parent.js 导入 parents.css

• Child.js 导入 child.css

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

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

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

Answer 1

除非使用唯一的类名，CSS模块或其他一些替代方法来将CSS样式范围确定为React中的任何组件，否则任何CSS文件中指定的样式都将全局应用。

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

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

Answer 2

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

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

我知道这似乎很烦人，但是它比应用内联样式更干净，并且在较小的项目中更易于实现。