CSS模块、React和重写CSS类
回答 6
Stack Overflow用户
发布于 2017-01-11 05:47:26
老职位，但仍然相关，所以增加一个答案，以帮助那些有类似问题的人
虽然在CSS模块中本身并不可行，但库的作者实际上已经很好地解决了这个特定的问题。
阅读他们的github文档，其中对https://github.com/react-toolbox/react-toolbox#customizing-components的主题有更深入的了解
特定组件的可主题类列表也在其站点的组件演示页上给出。
在您的示例中，除了传递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} />在表面上，这使用了一个他们抽象成单独的库反应-css-css的装饰符，我建议也读一读，因为它解释了默认值是如何在更深的层次上与您的重写组合的，包括它们使用的不同的合并策略。
Stack Overflow用户
发布于 2016-05-09 14:22:26
CSS模块不允许您安全地覆盖活动className (主要是通过设计)。实际上，它应该通过API公开，例如'activeClassName‘。
如果维护人员不同意，或者您需要快速添加，那么您可以很容易地添加自己的active 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>
);
}
}免责声明:代码未经测试。
Stack Overflow用户
发布于 2016-05-20 06:56:27
我也有过类似的案子，我就这样解决了：
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});https://stackoverflow.com/questions/35209924
复制
相似问题
在React中重写css类
如何在react js中重写css模块
React中CSS模块中CSS类的组合
重写HTML和CSS类
重写CSS类
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
