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

Question

我有一个Parent.js 组件，里面有一个子组件Child.js。

• 父.js导入父.css

• 儿童.js进口儿童.css

如果我在孩子中定义这个.css：

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

为什么我也可以在Parent.js组件中使用这个类名，尽管我没有在父.css中指定它？

Answer 1

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

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

有关如何使用 CSS 模块的详细信息，请参阅添加 CSS 模块样式表。您还可以查看 9 种在 React JS 中实现 CSS 的方法，以获取其他可用的替代方案。

Answer 2

我建议使用唯一的类名。例如，假设您有多个列表视图组件：MemberUsersListView，AdminUsersListView，TestUsersListView;它们中的每一个都需要不同的样式。我将创建以下CSS类：

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

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