如何在反应中编辑 css 模块

Question

我有以下文件：

测试.js：

import React from 'react';
import style from './style.module.css'
        
        
function Test() {
    return(<div className={style.classcolor}>Test</div>);
}
export default Test;

style.module.css

.classcolor
{
    background-color:blue;
}   

有没有办法改变js文件里面的css属性，类似于下面的代码？

style.classcolor.backgroundColor ="red";

Answer 1

一个选项是使用变量并根据它更改 class：

 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>

Answer 2

你可以在获取className后添加数组[0]，然后你可以从DOM访问样式

 document.getElementsByClassName(style.classcolor)[0].style.backgroundColor = 'red'

Answer 3

您可以看到这个库styled-component ，您可以为组件传递道具，并通过道具的值来决定样式的方式。