javascript - 如何在 React 中编辑 CSS 模块
问题描述
我有以下文件:
测试.js:
import React from 'react';
import style from './style.module.css'
function Test() {
return(<div className={style.classcolor}>Test</div>);
}
export default Test;
样式.module.css
.classcolor
{
background-color:blue;
}
有没有办法改变js文件里面的css属性,类似于下面的代码?
style.classcolor.backgroundColor ="red";
解决方案
一种选择是使用变量并根据它更改类:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = { orange: true }
}
toggleClass = () => {
this.setState({ orange: !this.state.orange })
}
render() {
const { orange } = this.state
return (
<div>
<div className={orange ? 'orange' : 'red'}>Test</div>
<button onClick={this.toggleClass}>Toggle class</button>
</div>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById("react")
);
.orange{
color: orange;
}
.red{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
一个不真正反应的方法是使用element.style
,更多信息:
document.getElementById('test').style.color = 'orange';
<div id="test">Test</div>