How to override css modules in react js

Question

I have 2 themes for my site. When I import a topic for the first time, it is imported, the second time it does not change. I need to change the topic override css. How can I solve the problem?

import React from 'react';

import { Settings } from 'react-feather';
import Modal from 'react-responsive-modal';

export default class ContentConfig extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            openModal: false,
            checked: true
        };
    }

    openModal = () => {
        this.setState({openModal: true});
    }

    closeModal = () => {
        this.setState({openModal: false});
    }

    changeRadio = (bool) => {
        this.props.state(bool);
        this.setState({checked: bool});
    }

    render() {
        return(
            <div className="contentConfig">
                <div onClick={this.openModal} className="editContentIcon">
                    <Settings />
                    <p>Settings</p>
                </div>
                <Modal open={this.state.openModal} onClose={this.closeModal} center>
                    <form style={{pading: 20}}> 
                        <legend>Choose a color</legend>
                        <div className="fieldset">
                            <div className="colorsBox">
                                <label htmlFor="radio1" className="colors" style={{background: "#5dafe5"}}></label>
                                <input 
                                    id="radio1"
                                    type="radio" 
                                    name="colors" 
                                    onChange={() => this.changeRadio(true)} 
                                    checked={this.state.checked} 
                                />
                            </div>
                            <div className="colorsBox">
                                <label htmlFor="radio2" className="colors" style={{background: "#d94f5c"}}></label>
                                <input 
                                    id="radio2"
                                    type="radio" 
                                    name="colors" 
                                    onChange={() => this.changeRadio(false)} 
                                    checked={!this.state.checked} 
                                />
                            </div>
                        </div>
                    </form>
                </Modal>
            </div>
        );
    }   
}

This is a child component for changing themes, when I select a theme, it calls a function in the parent component.

import React, { Component } from 'react';
import './App.css';
import ContentConfig from './ContentConfig.js';

export default class App extends Component {
    constructor() {
        super();
    }

    changeStyles = (bool) => {
        if(bool) {
            import('./LigthTheme.css').then(() => console.log('imported ligth theme'));
        } else {
            import('./DarkTheme.css').then(() => console.log('imported dark theme'));
        }
    }

    render() {
            return (
                <div className="mainBox"> 
                    <div className="menu">
                        <h1>Devices</h1>
                        <ul className="links">

                        </ul>
                        <ContentConfig state={this.changeStyles} />
                    </div>
                </div>
            );
    }
}

When I change the theme for the first time in the browser, it shows what was added to the header. After the second time when changing the theme, nothing changes in the header.

I see that you are not passing any value to changeStyles parameter in bool. You will need to pass bool value based user's choice and then the import will change. Let me know if i missed something — logeekal, Apr 19 '19 at 09:54
At the beginning in the ContentConfig component in the input I set the `onChange={()=>this.changeRadio (true)}` method. Then I send a Boolean to the parent component `this.props.state(bool)` in the render state in the render `state={this.changeStyles}` method in the changeRadio medication and the changeStyles method is called. — X.Mart, Apr 19 '19 at 10:25

score 0 · Answer 1 · answered Apr 19 '19 at 13:27

I see 2 issues here because of which your change in CSS is not working.

First

Once you have imported particular theme, the new import should not have any impact. Since both of the css files are imported now.

I don't think react will unload the previously import css file. For example, if you first imported LightTheme and then DarkTheme, at this time both of these are imported in the cache.

Try creating a tag for style sheet and then changing the value dynamically. That should resolve the issue.

Second

You are not passing any parameter in the call of state={this.changeStyles}.

Try passing something like state = {this.changeStyles(this, false)} should result in DarkTheme.

Let me know the outcome.

This answer may help as well.

The second option does not work since I changeStyles function receives parameters. Try creating 2 components and see that the function receives the parameters. — X.Mart, Apr 22 '19 at 06:16

How to override css modules in react js

1 Answers1