React CSS模块中的层叠样式

Question

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

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

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

Answer 1

将导入语句更改为：

导入'./ <>'

Answer 2

也许在全局CSS文件中定义这些类。

Answer 3

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

Here是实现相同效果的示例。

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

传递给子级