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文件。

我不认为react会卸载以前导入的CSS文件。例如，如果先导入LightTheme，然后再导入DarkTheme，则这两个时间都导入到缓存中。

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

第二

您没有在state={this.changeStyles}的调用中传递任何参数。

尝试传递类似state = {this.changeStyles(this, false)}之类的内容会导致DarkTheme。

让我知道结果。

This答案也可能有帮助。

如何在React JS中覆盖CSS模块

1 个答案: