Javascript 如何覆盖react js中的css模块

我的网站有两个主题。当我第一次导入主题时，它会被导入，第二次它不会更改。我需要更改主题覆盖css。我怎样才能解决这个问题

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>
        );
    }   
}

从“React”导入React；
从“react feather”导入{Settings}；
从“反应响应模态”导入模态；
导出默认类ContentConfig扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
OpenModel:错误，
核对：正确
};
}
OpenModel=（）=>{
this.setState（{openModal:true}）；
}
closeModal=（）=>{
this.setState（{openModal:false}）；
}
changeRadio=（bool）=>{
这个.props.state（bool）；
this.setState（{checked:bool}）；
}
render（）{
返回(
背景

选择一种颜色
此.changeRadio（正确）}
checked={this.state.checked}
/>
此.changeRadio（错误）}
checked={！this.state.checked}
/>
);
}   
}

这是一个用于更改主题的子组件，当我选择一个主题时，它调用父组件中的一个函数

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>
            );
    }
}

import React，{Component}来自'React'；
导入“/App.css”；
从“./ContentConfig.js”导入ContentConfig；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
}
变更样式=（bool）=>{
如果（bool）{
导入（'./LigthTheme.css'）。然后（（）=>console.log（'imported LigthTheme'）；
}否则{
导入（'./DarkTheme.css'）。然后（（）=>console.log（'imported dark theme'）；
}
}
render（）{
返回(
装置


);
}
}

---

当我第一次在浏览器中更改主题时，它会显示添加到标题的内容。在第二次更改主题后，标题没有任何更改。

我在这里看到两个问题，因为您对CSS的更改不起作用

首先

导入特定主题后，新的导入不会产生任何影响。因为现在两个css文件都已导入

我认为react不会卸载以前导入的css文件。 例如，如果先导入LightTheme，然后导入DarkTheme，此时这两个主题都将导入缓存中

尝试为样式表创建标记，然后动态更改该值。这应该解决问题

秒

您没有在调用

state={this.changeStyles}

时传递任何参数

尝试传递类似于

state={this.changeStyles（this，false）}

的内容应该会导致暗色调

让我知道结果

---

答案也可能有帮助。

我在这里看到两个问题，因为您在CSS中的更改不起作用

首先

导入特定主题后，新的导入不会产生任何影响。因为现在两个css文件都已导入

我认为react不会卸载以前导入的css文件。 例如，如果先导入LightTheme，然后导入DarkTheme，此时这两个主题都将导入缓存中

尝试为样式表创建标记，然后动态更改该值。这应该解决问题

秒

您没有在调用

state={this.changeStyles}

时传递任何参数

尝试传递类似于

state={this.changeStyles（this，false）}

的内容应该会导致暗色调

让我知道结果

---

答案也可能有帮助。

我发现您没有向bool中的changeStyles参数传递任何值。您需要传递基于bool值的用户选择，然后导入将更改。如果我在输入中的ContentConfig组件的开头遗漏了什么，请告诉我，我将设置

onChange={（）=>this.changereradio（true）}

方法。然后，我将一个布尔值发送到changeRadio中render

state={this.changeStyles}

方法的render状态中的父组件

this.props.state（bool）

，并调用changeStyles方法。我发现您没有向bool中的changeStyles参数传递任何值。您需要传递基于bool值的用户选择，然后导入将更改。如果我在输入中的ContentConfig组件的开头遗漏了什么，请告诉我，我将设置

onChange={（）=>this.changereradio（true）}

方法。然后，我将一个布尔值发送到changeRadio中render

state={this.changeStyles}

方法中render状态的父组件

this.props.state（bool）

，并调用changeStyles方法。第二个选项不起作用，因为我的changeStyles函数接收参数。尝试创建两个组件，并查看函数是否接收参数。第二个选项不起作用，因为I changeStyles函数接收参数。尝试创建两个组件，并查看函数是否接收参数。