javascript - React CSS 模块中的级联样式

Question

在我的 React 应用程序中，我有一些内联 JS 样式和 CSS 类的困惑组合。我决定将所有内容分成 CSS 模块，我可以这样使用:

从“./ImageTextOption.module.css”导入样式

并像 JS 对象一样使用它们。但是，现在样式不会从父元素(未在同一模块中定义)级联。我有类似 .selected .option-text 的东西，即使我确实在外部有 selected 类，因为 option-text 已更改为唯一名称与 selected 元素内的 option-text 不匹配。使用 CSS 模块使其再次匹配的正确方法是什么。

Answer 1

我遇到了同样的挑战，并且发现有时将样式作为 Prop 传递给子组件更容易。如果您在不同的地方重用子组件，这是一个很好的模式。

Here是一个实现完全相同效果的示例。

当然，如果子组件特定于父组件并且仅使用一次，或者如果父子组合彼此特定，那么也许一种方法是让他们简单地共享 css 导入父级，然后通过 className='

将其传递给子级