How to edit css modules in react

Question

I have the following files:

Test.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;
}   

Is there a way to change the css attributes inside the js file, similar to the code below?

style.classcolor.backgroundColor ="red";

Answer 1

An option is to use a variable and change the class depending on it:

 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>

A not really react way is to use element.style , more information :

 document.getElementById('test').style.color = 'orange';

 <div id="test">Test</div>

Answer 2

you can add array [0] after get the className, and then you can access the style from DOM

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

Answer 3

You can see this library styled-component , you can pass props for the component and by the value of the prop, you decide in how the style will be.