Модуль импорта зависит от состояния реакции

Question

Можно применять стили, когда isVariable: true ?

Я имею в виду, можно ли импортировать модули (module1 + module2) в зависимости от состояния в React?

Есть ли возможность заставить его работать?

import './style1.scss';
import './style2.scss';

class RenderApp extends Component {

    constructor(props){
        super(props)

        this.state = {
            isVariable: true
        }
    }

  setRole(){
    if (this.state.isVariable === false){
    this.setState({isVariable: true})
    }
    else if(this.state.isVariable === true){
      this.setState({isVariable: false})
    }
  }

    render() {
        return(
            <div>
              <Routing isVariable ={this.state.isVariable}/>
              <div className = "switcher">                   
                  <button className = "primary-button" onClick = {() => this.setRole()}> Test</button>
              </div>
            </div>
        )
    }
}

---

РЕДАКТИРОВАТЬ

Хорошо, я добавил в рендер моего компонента:

    this.state.isVariable 
    ?  import ("./styles1.css") 
    :  import ("./styles2.css")

Можно ли импортировать стили1, когда стили2 «связаны»?

Проблема заключается в том, что системы проектирования перезаписывают, и после одного импорта отдельные переменные остаются в своем более раннем состоянии (h1 и т. Д.)

Answer 1

Существует предложение 4 этапа . Ожидается, что будет опубликовано в 2020 году

Это позволит вам сделать это:

isVariable ? import("./style1.css") : import("style2.css");

Вот минимальное рабочее приложение: https://codesandbox.io/s/sad-lumiere-vtnhu

Обратите внимание, что вам не нужно это с CSS. Вы можете установить className и ссылаться на него в своем CSS:

<div className={isVariable ? "style1" : "style2"} />