Reactjs 使用sass和css模块对react应用程序进行主题化

我想在react应用程序中实现主题化。因此，我使用了（sass mixins）

但这在与css模块结合使用时不起作用，因为主题化类不在我想要主题化的css模块的范围内

是否有人有解决此问题的方法，或者有其他方法使用sass对react应用程序进行主题化

App.js

const theme = require('../../Theming.sass)

<div class={theme['theme-dark'}>
  <SearchBar/>
  ...
</div>

SearchBar.css（已编译）

主题化.sass

.theme-dark { background: #000; }

.theme-light { background: #fff; }

$themes: (
  light: (
    primary: #fff,
    secondary: #bfbfbf,
  ),
  dark: (
    primary: #000,
    secondary: #1a1a1a,
  ),
);

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    .theme-#{$theme} & { /* HOW TO USE CSS-MODULES HERE ?*/
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }

  }
}

---

您还需要通过css模块导入

。主题暗

应该是这样的：

<div class={styles.themeDark}>
  <SearchBar/>
  ...
</div>

...

---

您还应该使用sass资源加载器：

我有一个类似的问题，我在React应用程序中将sass与CSS模块一起使用，结果我将主题类用作全局类，而没有使用CSS模块，因为每次我使用mixin时，它都会将模块前缀添加到样式中

我在mixin中的主题类中添加了

：global

：

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    :global(.theme-#{$theme}) & { 
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }

  }
}

我在App.js中的JSX中直接指定了类：

<div class="theme-dark">
  <SearchBar/>
  ...
</div>

...

---

我希望这对某人有帮助

这是一个很好的暗示。但是我认为我必须在mixins函数中使用css模块。我更新了问题并在mixins函数中标记了行。你知道在这种情况下如何使用css模块吗？这不起作用，因为mixin添加了raw class.theme。我们必须在mixin中引用css模块类。

<div class={styles.themeDark}>
  <SearchBar/>
  ...
</div>

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    :global(.theme-#{$theme}) & { 
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }

  }
}

<div class="theme-dark">
  <SearchBar/>
  ...
</div>