Question

我正在使用reactjs在一个多主题网站上工作，并为不同的主题方案创建了.scss文件。我已经搜索了React和大多数建议的样式组件中的switch主题，但我不想这样做。

我还创建了上下文，并在上下文值上切换了.scss文件，但是首先导入.scss文件仅适用于导入文件更改。

Answer 1

我假设您在这里使用React，所以建议您使用React Context API。

根据我对文档的理解，正确的做法是按组件划分样式主题，每个组件使用一个样式表，例如

.your-component {

  &--light {
    background-color: light;
  }

  &--dark {
    background-color: dark;
  }
}

然后您可以为上下文创建提供者和使用者，例如

const { Provider, Consumer } = createContext();

提供者看起来像这样：

default class Provider extends PureComponent {

  render() {
    return <Provider value={this.props.theme}>{this.props.children}</Provider>;
  }
}

消费者：

默认类Consumer扩展了组件{

  render() {
    return (
      <Consumer>{theme => this.props.children(defaultTo(theme, this.props.defaultTheme))}</Consumer>
    );
  }
}

然后，您的每个组件应如下所示：

import React, { PureComponent } from 'react';
import { Consumer } from '../theme-context';

import './myComponent.scss';



default class MyComponent extends PureComponent {

  _renderMyComponentWithTheme = theme => {


    return (
      <div styleName={`class--${theme}`}>
        Hello World
      </table>
    );
  };

  render() {
    return <Consumer defaultTheme="light">{this._renderMyComponentWithTheme}</Consumer>;
  }
}

这将使您可以在顶级传递主题，并且所有组件都具有相同的主题。

import { Provider } from '../theme-context';    
<Provider value="dark">
      <App />
    <Provider>

https://reactjs.org/docs/context.html#contextconsumer

如何在运行时切换scss / css文件或在reactjs中切换主题

1 个答案: