Question

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

但这不能与css-modules一起使用，因为主题类不在我要主题化的css-module之外。

有人可以解决此问题吗，还是可以使用sass作为反应应用程序主题的另一种方法？

App.js

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if isExpanded {
            return CGSize(width: collectionView.frame.width, height: 200)
        } else {
            return CGSize(width: collectionView.frame.width, height: 40)
        }
    }
}

SearchBar.js

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

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

SearchBar.scss

const styles = require('./SearchBar.scss)
const theme = require('../../Theming.sass)

<div class={styles.searchBar}>
  ...
</div>

SearchBar.css（已编译）

.searchBar {
  @include themify($themes) {
    color: themed('primary');
    background: themed('secondary');
  }

  height: 3em;
  overflow: hidden;

Theming.sass

.searchBar {
  height: 3em;
  overflow: hidden;
}

.theme-light .searchBar {
  color: #fff;
  background: #bfbfbf;
}

.theme-dark .searchBar {
  color: #000;
  background: #1a1a1a;
}

Answer 1

我有一个类似的问题，我在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>

我希望这对某人有帮助。

Answer 2

您还需要通过css-modules导入.theme-dark。

应该是这样的：

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

您还应该为此使用sass-resources-loader：https://github.com/shakacode/sass-resources-loader

使用Sass和CSS模块对React应用进行主题化

2 个答案: