Question

我无法找到更好的主题解决方案。我有一个带变量的sass文件：

vars.scss：

$colors: (
    dark: (
        theme1: #0096dc,
        theme2: #eb8200,
        …
    ),
    …
);

现在我将theme道具传递给所有应该具有某些样式的组件，具体取决于用户正在查看的页面。在React中我构建了这样的类名：

<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div>

在sass中我做了：

@import 'vars';

.button{
    /* basic styles */
    font-size: 14px;
    border: 1px solid;

    @each $theme, $color in map-get($colors, dark) {
        &-#{$theme} {
            @extend .button;
            border-color: $color;
            color: $color;
        }
    }
}

但这绝对不方便，因为每次我需要根据主题设置元素时，我需要放置这样的代码。

有些解决方案如何在webpack中加载带有变量的不同文件，但我从redux收到theme道具，因此webpack无法访问该道具。

同样，我找不到将属性从react组件传递给sass的解决方案。只是相反。

无法在sass中使用导入中的变量。仍未实施。

不幸的是，在当前项目中不能使用CSS-in-JS方法。

请帮助找到更好的方法。

Answer 1

我会把它变成无状态的功能组件。

function BrightBox(props){
  <div className={styles[`button${theme ? `-${theme}` : ``}`]}>
    {props.children}
  </div>
}

然后导入并使用它。没有必要传递主题。

{user.notice ? 
  <BrightBox>
    there are {user.notice.issues.size} outstanding issues!
  </BrightBox>
 : null
}

根据React prop值使用sass变量来反应组件主题

1 个答案: