DEV Community
·
使用CSS模块的React：跨层级设置样式
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
在CSS模块中，选择器会被转换，父组件无法直接设置子组件样式。通过同时使用原始类名和转换后的类名，可以确保选择器的唯一性并直接设置子组件样式。使用`classes`函数可以简化样式管理。
🎯
关键要点
- 在CSS模块中，选择器会被转换，父组件无法直接设置子组件样式。
- 父组件需要通过传递props来控制子组件样式，这导致样式与逻辑之间的耦合。
- 可以通过同时使用原始类名和转换后的类名来确保选择器的唯一性并直接设置子组件样式。
- 使用`classes`函数可以简化样式管理。
- 在JS中，可以通过`classes`函数设置类名。
- 使用`:global`可以在CSS中针对子组件进行样式设置。
❓
延伸问答
在CSS模块中，父组件如何设置子组件的样式？
父组件无法直接设置子组件样式，需要通过传递props来控制子组件的样式。
CSS模块中选择器转换的影响是什么？
选择器被转换后，父组件无法知道子组件的类名，导致无法直接设置样式。
如何确保CSS模块中选择器的唯一性？
可以通过同时使用原始类名和转换后的类名来确保选择器的唯一性。
使用`classes`函数有什么好处？
使用`classes`函数可以简化样式管理，使得类名的设置更加方便。
如何在CSS中使用`:global`？
:global用于在CSS中针对子组件进行样式设置，可以直接影响子组件的样式。
在JS中如何设置类名？
可以通过`classes`函数结合CSS模块的类名来设置类名。
➡️
