如何在React JS中覆盖CSS模块

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.

Answer 1

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.