1

我将JavaScript文件中的颜色变量列表作为对象。

export const colors = [
{
    colorVariable: "$ui-background"
},
{
    colorVariable: "$ui-01"
},
{
    colorVariable: "$ui-02"
},
...
]

我基于scss具有 50 种颜色列表的文件创建了上面的目标文件。我使用了与 scss 变量相同的名称所以，我可以在我的 React 组件中使用 scss 变量。

$carbon--theme: (
    ui-background: #ffffff,
    ui-01: #f3f3f3,
    ui-02: #ffffff,
    ...
)

我将这些颜色jsx从 color.js 文件导入到文件中。

import { colors } from './theme';

我想使用该颜色变量来提供以下 div 的背景。我尝试了以下方式所以，我可以应用 scss 变量。但是，不工作。

component.jsx

代码：

Object.keys(colors).map(key => {
        return (
        <div style={{ background: colors[key].colorVariable }} className={'theme-color')} />
        )
})

我尝试了很多东西，但没有任何效果。任何帮助将不胜感激。（如果我可以在theme-color类内的 css (component.scss) 文件中使用该变量，那就太好了。如果没有，那就好了）。

我正在使用 react 16。任何帮助将不胜感激，如果有任何问题，请告诉我。

4

1 回答 1

1

首先 - SASS 变量在运行时不存在。仅在编译期间可用。输出 CSS 文件根本不包含 SASS 变量，因为它会用原始值替换任何出现的变量。

您可以基于 SCSS 对应项创建 CSS 变量，然后在代码中重用 CSS 变量。

:root { /* or your element selector instead of `:root` so the variables will be scoped */
  --ui-background: #{map-get($carbon--theme, "ui-background")};
  --ui-01: #{map-get($carbon--theme, "ui-01")};
  --ui-02: #{map-get($carbon--theme, "ui-02")};
}

只需使用上面的代码片段创建额外的 SASS/SCSS 文件。

然后只需调整colors变量中的值。

export const colors = [
  {
    colorVariable: "var(--ui-background)"
  },
  {
    colorVariable: "var(--ui-01)"
  },
  {
    colorVariable: "var(--ui-02)"
  }
]

它在运行时完美运行。

@each奖励 - 如果由于某种原因您需要重用每种颜色，您可能只需使用 SASS 的流控制规则迭代主题图，例如：

:root { /* or your element selector */
  @each $name, $color in $carbon--theme {
    --#{$name}: #{$color};
  }
}

顺便说一句，该colors变量是一个数组，因此您无需获取键即可对其进行迭代。

还有一个可能引发错误的附加问题： className={'theme-color')}- 你有一个结束括号)。无论如何，对于字符串值，您可以简单地省略 JSX 占位符并直接在引号中传递值。看固定的例子：

colors.map(
  (item) => <div key={item.colorVariable} style={{ background: item.colorVariable }} className="theme-color"/>
);

如果colors数组仅包含颜色值，您可以简单地将其替换为字符串数组，例如： ['--ui01', '--ui02', ...]

然后就更简单了：

colors.map(
  (color) => <div key={color} style={{ background: color }} className="theme-color"/>
);

顺便说一句#2。如果由于某种原因您不想使用 CSS 变量，则另一个选项是使用诸如scss-to-json之类的库，它可以提取 SCSS 变量并输出为 JSON。这需要额外的构建步骤以及在代码库中导入/合并 JSON。

于 2019-09-20T11:32:05.933 回答