CSS模块,反应和重写CSS类

Question

我正在使用一个React组件库(React Toolbox),它使用CSS模块和Webpack在它们的Tab组件中输出这个类:label___1nGy active___1Jur tab___Le7N这tab是我传递的className prop.这些label和active课程来自图书馆.我想应用一组不同的样式active,比如.tab.active在哪里tab引用我创建的样式,并active匹配库创建的生成的选择器,但无法弄清楚如何使用css-modules执行此操作.我需要覆盖这个动态选择器:.label___1nGy.active___1Jur.

[]] 2 [] 3

Answer 1

旧帖但仍然相关,所以添加一个答案来帮助那些有类似问题的人

尽管单独使用CSS模块本身并不存在,但react-toolbox库的作者实际上已经非常好地解决了这个特定问题

阅读他们的github文档,这些文档更深入地介绍了这个主题,网址是https://github.com/react-toolbox/react-toolbox#customizing-components

特定组件的可主题类列表也在其站点的组件演示页面上给出

在您的情况下,以及为tab选择className,您还可以创建一个主题,其中的类将覆盖默认主题的所需部分,并将其作为themeprop 传递.例如,有些事情......

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中,我建议给它一个读取,因为它解释了默认值是如何与更深层次的覆盖组合,包括他们使用的不同合并策略

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包根据isActiveprop 动态添加活动类。isActive您可以提供任何布尔值，而不是prop。

更简洁的方法可能是：

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

Answer 3

使用:global(.classname)您可以覆盖外部类名。

甚至可以覆盖第 3 方库 css。

:global(.active) {
  color: hotpink;
}

Answer 4

CSS模块不允许您安全地覆盖活动的className（主要是设计使然）。确实应该通过API公开它，例如'activeClassName'。

如果维护者不同意或您需要此快速说明，则可以很容易地添加自己的活动className，因为您的实现组件正在管理索引状态：

import {Tab, Tabs} from 'react-toolbox';
import styles from './MyTabs.css';


class MyTabs extends React.Component {
  state = {
    index: 1
  };

  handleTabChange(index) {
    this.setState({ index });
  }

  render() {
    const { index } = this.state;
    return (
      <Tabs index={index} onChange={this.handleTabChange}>
        <Tab label="Tab0" className={index === 0 ? styles.active : null}>
            Tab 0 content
        </Tab>
        <Tab label="Tab1" className={index === 1 ? styles.active : null}>
            Tab 1 content
        </Tab>
      </Tabs>
    );
  }
}

免责声明：代码未经测试。