React CSS 模块中的级联样式

Question

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

import styles from './ImageTextOption.module.css'

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

Answer 1

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

这是一个完成相同操作的示例。

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

Answer 2

将导入语句更改为：

导入 './<<"PathToCss">>'