React CSS 模块中的级联样式答案

【问题标题】：Cascade styles in React CSS moduleReact CSS 模块中的级联样式
【发布时间】：2020-06-16 01:15:10
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css reactjs css-modules react-css-modules

【解决方案1】：

将导入语句更改为：

导入'./>'

【讨论】：

从 './ImageTextOption.module.css' 导入样式是错误的。将其更改为import './ImageTextOption.module.css'
codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
create-react-app.dev/docs/adding-a-css-modules-stylesheet bottomline：React 本身建议使用 .module.css 命名，因为这些扩展默认启用预处理器。

【解决方案2】：

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

Here 是一个实现相同功能的示例。

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

【讨论】：

这就是我所担心的。没有任何可行的方法可以正常级联吗？就像预处理器检测 .selected .option-text 之类的级联并进行相应处理的方式一样？
这就是您要找的吗？：github.com/gajus/… 我还没有使用它，但它似乎可以让您到达那里。 ...在相关说明中，当涉及到供应商样式（KendoUI React、Material UI 等）时，我特别遇到了级联样式的问题，那时您对供应商的主题/样式设置方式非常了解并传递样式 - 它会变得像噩梦一样。
也没试过。如果找不到更好的解决方案，我会看看。