时间戳

首页 > 解决方案 > React CSS 模块中的级联样式

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

问题描述

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

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

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

标签： javascriptcssreactjscss-modulesreact-css-modules

解决方案

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

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

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

推荐阅读