Question

我从我的sass文件中生成了两个具有已定义颜色变量的css文件让我们称它们为<tbody> <tr *ngFor="let venue of venues[0]"> <td (click)="onVenNameClick()" onMouseEnter() ></td> <td>{{venue.address}}</td> <td>{{venue.description}}</td> <td>{{venue.isactive}}</td> <td>{{venue.userid}}</td> <td>{{venue.displayid}}</td> </tr> </tbody>和dark.css 现在我要做的是动态交换这两个CSS以更改主题

到目前为止，我有这样的事情

light.css

上面没有真正起作用。..部分损坏。

问题在于主题只能切换一次，例如默认主题为... componentDidUpdate() { if (this.props.colorScheme === 'dark') { require('../../../static/css/style-dark.css'); } else { require('../../../static/css/style-light.css'); } } } ...，然后可以将其更改为light，但是之后无论如何我都无法将其更改回dark < / p>

有类似的问题吗？也许这根本不是正确的方法，所以任何想法都会被赞赏

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>

在React中动态交换CSS

1 个答案: