CSS 模块、React 和覆盖 CSS 类

Question

我正在使用一个 React 组件库（React Toolbox），它使用 CSS 模块和 Webpack 在其 Tab 组件中输出此类： label___1nGy active___1Jur tab___Le7N tab 是我正在传递的类名道具. label 和 active 类来自图书馆。 I want to apply a different set of styles on active , something like .tab.active where tab is referring to the styles I have created and active 匹配库创建的生成选择器，但无法弄清楚如何使用 css-modules 执行此操作。我需要覆盖这个动态选择器： .label___1nGy.active___1Jur 。

[ ]] 2 [ ] 3

原文由 Joe Bruno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

旧帖子但仍然相关，因此添加答案以帮助有类似问题的人

尽管仅在 CSS 模块中不可能实现，但 react-toolbox 库的作者实际上已经很好地解决了这个特殊问题

在 https://github.com/react-toolbox/react-toolbox#customizing-components 阅读他们更深入的 github 文档

特定组件的主题类列表也在他们网站上的组件演示页面上给出

在您的情况下，除了为选项卡传递 className 之外，您还将创建一个主题，其中包含覆盖默认主题所需部分的类，并将其作为 theme 传递。例如一些类似的东西……

MyComponentWithTabs.css

 .tab {
  color: white;
}

MyTabTheme.css

 .active {
  color: hotpink;
}

MyComponentWithTabs.js

 import styles from './MyComponentWithTabs.css'
import tabTheme from './MyTabTheme.css'

// blah blah...

return <Tab key={index} className={styles.tab} theme={tabTheme} />

在表面下，这使用了一个他们已经抽象到单独的库 react-css-themr 中的装饰器，我建议也阅读一下，因为它解释了默认值是如何与你的覆盖更深入地组成的，包括他们使用的不同合并策略

原文由 alechill 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有一个类似的案例，我是这样解决的：

 import classNames from 'classnames';

...

const activeClassName = {};
activeClassName[`${styles.active}`] = this.props.isActive;
const elementClassNames = classNames(styles.element, activeClassName);

return <div className={elementClassNames} />

我正在使用 classnames 包动态添加基于 isActive 道具的活动类。您可以提供任何布尔值，而不是 isActive 道具。

一种更简洁的方法可能是：

 const elementClassNames = classNames(styles.element, {[styles.active]: this.props.isActive});

原文由 Patrick 发布，翻译遵循 CC BY-SA 3.0 许可协议