Как переопределить модули CSS в реагировать JS

Question

У меня есть 2 темы для моего сайта. Когда я импортирую тему в первый раз, она импортируется, во второй раз она не меняется. Мне нужно изменить тему переопределить 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>
        );
    }   
}

Это дочерний компонент для изменения тем, когда я выбираю тему, он вызывает функцию в родительском компоненте.

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

Когда я в первый раз меняю тему в браузере, она показывает, что было добавлено в шапку. После второго раза при смене темы в шапке ничего не меняется.

Answer 1

Я вижу здесь 2 проблемы, из-за которых ваши изменения в CSS не работают.

Первый

После импорта определенной темы новый импорт не должен иметь никакого влияния.Поскольку оба файла css импортированы сейчас.

Я не думаю, что реакция выгрузит ранее импортированный файл css.Например, если вы сначала импортировали LightTheme, а затем DarkTheme, в настоящее время оба они импортируются в кэш.

Попробуйте создать тег для таблицы стилей, а затем динамически изменить значение.Это должно решить проблему.

Второй

Вы не передаете никаких параметров в вызове state={this.changeStyles}.

Попытка передать что-то вроде state = {this.changeStyles(this, false)} должно привести к DarkTheme.

Дайте мне знать результат.

Этот ответ также может помочь.