Как сделать switcher темы CSS в React приложении?

Question

[GreaterGlider]

Добрый всем день!

Есть две таблицы стилей, условно светлая тема и темная тема. Написал компонент который по клику подгружает .css файл:

class StyleSwitcher extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: false,
        }
        this.handleOnClick = this.handleOnClick.bind(this);
    }

    handleOnClick(event) {
        this.setState({checked: !this.state.checked});

        if (!this.state.checked) {
            import('./light.css')
        } else {
            import('./dark.css')
        }
    }

    render() {
        return (
            <Fragment>
                <input type="checkbox" onClick={this.handleOnClick}/>
            </Fragment>
        )
    }
}

При клике стили меняются на светлый, но при повторном не хочет меняться на темный. Вопрос как реализовать подобное поведение? И как правильней всего работать с динамическими изменяемыми стилями в реакте?

Важное дополнение: должно работать в IE хотя бы 11 версии.

Answer 1

[Александр Вульф]

Так у вас просто подключаются стили и не удаляются. Делайте по старинке через createElement('style'), а потом удаляйте его при переключении стилей.

UPD 13 мая 2019: вообще, в реакте сейчас принято передавать тему откуда-то сверху (например, с помощью контекста) и реализовывать стиль на уровне компонента. Подгрузка CSS напрямую выглядит как какой-то лютый костыль.

Comments

[GreaterGlider]

Спасибо, наверное так и придется делать. То есть средствами React'a подобное не сделать?

[Александр Вульф]

GreaterGlider, почему-же. Можно с помощью реакта рендерить тег style.