Динамически поменяйте местами css в реакции

Question

Я генерирую два css-файла из моих sass-файлов с определенными переменными цвета. Давайте назовем их dark.css и light.css Теперь я хочу динамически поменять местами эти два css для изменения тем

Пока что яесть что-то вроде этого

...
  componentDidUpdate() {
      if (this.props.colorScheme === 'dark') {
        require('../../../static/css/style-dark.css');
      } else {
        require('../../../static/css/style-light.css');
      }
    }
  }
...

Выше не работает на самом деле. Ну, это работает .. частично

Проблема в том, что тема переключается только один раз, например, по умолчанию это light, то это может бытьизменилось на dark, но после этого, независимо от того, что я не могу изменить обратно на light

Была ли у кого-то похожая проблема?может быть, это совсем не так, поэтому любые идеи приветствуются

Answer 1

Я думаю, вы можете сделать что-то подобное ...

Создайте файл стилей js вместо файла стилей css.

пример file1.js

export default = ({
  backgroundColor: 'red',
  color: 'blue',
  paddingTop: 20,
  paddingBottom: 20,
});

// file 1
//export default({  <-- replace this line in your file
const file1 = {
  backgroundColor: 'red',
  color: 'blue',
  paddingTop: 20,
  paddingBottom: 20,
};

// file 2
//export default({  <-- replace this line in your file
const file2 = {
  backgroundColor: 'yellow',
  color: 'black',
  paddingTop: 40,
  paddingBottom: 40,
};

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      theme: 1,
      styles: {...file1},
    };
  }
  
  changeTheme = () => {
    this.setState({
      styles: this.state.theme === 1 ? {...file2} : {...file1},
      theme: this.state.theme === 1 ? 2 : 1,
    });
  };
  
  render() {
    return (
      <div style={this.state.styles}>
        Hello
        <button onClick={this.changeTheme}>
          Change Theme
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Dashboard />,
  document.querySelector('#app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>