如何在反应组件中使用 javascript 访问 Sass 变量？答案

【问题标题】：How to access Sass variables using javascript inside a react component?如何在反应组件中使用 javascript 访问 Sass 变量？
【发布时间】：2021-06-23 08:41:27
【问题描述】：

我只想在一个 React 组件中从 theme.scss 更改下面显示的 Sass 变量的值。

主题.scss

$backgroundColor: #fff;
$secondaryColor: #000;

反应组件

useEffect(() => {
  // i want to change the Sass variable here inside this hook
  // so that when the state changes the color changes
}, [state])

【问题讨论】：

你不能动态改变 SASS 变量，一旦样式被编译，变量就不再存在了。您应该改用CSS variables。
在 Sass 函数中使用 css 变量时出现错误。SassError: argument $color of darken($color, $amount) must be a color on line 39 of F:\Projects\REACT PROJECTS\react\src \Screens\HomeScreen.scss，在函数 darken 中来自 stdin >> 的第 39 行背景：darken(var(--primary-color), 3);

标签： reactjs sass use-effect

【解决方案1】：

您可以使用CSS variables按以下步骤实现主题：

在index.html 文件的body 中添加自定义data-* 属性：

<body data-theme="light"> <!-- Let's name it data-theme and start with light -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

并且，为所有（您可以有两个以上的主题）data-* 属性值（即主题）定义任意数量的 CSS 变量：

body[data-theme='light'] {
  --body-bg: white;
  --color: black;
}

body[data-theme='dark'] {
  --body-bg: black;
  --color: white;
}

:root {
  --primary-color: green; 
  // you can also set some CSS vars (that are common to all the themes) on :root
}

还有，这里有一个示例如何use these CSS variables 为标签（或类）：

body {
  color: var(--color) !important; // Here
  background-color: var(--body-bg) !important; // And, Here
  font-family: 'Segoe UI', 'Roboto'; // Ignore it, just for example
}

// example using in a class
.some-class {
  color: var(--color);
  background-color: var(--body-bg);
}

您现在可以创建一些可以在主题之间切换的实用函数：

export function setLightTheme() {
  document.getElementsByTagName('body')[0].setAttribute('data-theme', 'light')
}

export function setDarkTheme() {
  document.getElementsByTagName('body')[0].setAttribute('data-theme', 'dark')
}

您可以在任何组件中导入以上功能，根据需要更改主题。

【讨论】：

感谢您的反馈。当我在 Sass 函数（如变暗）和自定义函数中使用 css 变量时出现错误。 “SassError：darken($color, $amount) 的参数 $color 必须是 F:\Tech Projects\REACT PROJECTS\portfolio_react\src\Screens\HomeScreen.scss 第 39 行的颜色，在函数 darken 来自标准输入的第 39 行 >>背景：变暗（var（--primary-color），3）；“
这很棘手。试试这个：codyhouse.co/blog/post/… 不行的话让我试试，我也可以试试。
该博客建议在 Sass 中定义一个函数以及一些用于将亮度应用于颜色的额外变量使其变得复杂，并且对我也不起作用。
我认为在 darken 这样的 SASS 函数中使用 CSS 变量是不可能的（以简单的方式）。因为像 darken 这样的 SASS 函数会被编译并计算为某个颜色值（编译成 CSS 后没有变量）。您应该考虑其他主题选项，不是这个（使用 CSS 变量）。
我试过那个，但从来没有为我工作过。正如你所说，我应该寻找其他一些主题选项。