CODEWITHSUNDEEP
reactjsreduximportmodule
Piotr Żak
Piotr Żak

Reputation: 2132

Import module depends on React State

It's possible to apply styles on when isVariable: true?

I mean, is it possible to import modules(module1 + module2) depending on the state in React?

Is there possibility to make it work?

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

EDIT

Ok i added in render of my component:

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

It's possible to unimport styles1, when styles2 are 'connected' ?

The problem is that design systems overwrite, and after a single import, individual variables remain in their earlier state (h1 etc.)

Upvotes: 0

Views: 222

Answers (1)

Neskews
Neskews

Reputation: 824

There is a stage 4 proposal. It's expected to be published in 2020

It enables you to do that:

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

Here's a minimal working app: https://codesandbox.io/s/sad-lumiere-vtnhu

Note, that you dont need it with css. You can set a className and refer it in your css:

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

Upvotes: 3

Related Questions