如何在React中从localStorage获取SCSS$变量并使用JS设置它们？

首先，从localStorage获取所需的变量并将其存储在变量中：

const primaryColor = localStorage.getItem('primaryColor');
然后，在您的组件中定义所需的样式对象并使用所存储的变量来设置样式：
const myStyles = {
  color: `${primaryColor}`,
  backgroundColor: `${primaryColor}-light`,
return (
  <div style={myStyles} />
如果您想在整个应用程序中使用相同的样式变量，请创建一个独立的scss文件来定义它们：
$primaryColor: #55c5a6;
在您的组件中导入该文件：
import './styles.scss';
在您的组件中使用所定义的SCSS变量来设置样式：
const myStyles = {
  color: `$primaryColor`,
  backgroundColor: `lighten($primaryColor, 10%)`,
return (
  <div style={myStyles} />
请注意，您需要使用CSS预处理器（如SCSS）来使用scss变量。如果您未使用预处理器，您也可以使用CSS自定义属性（例如： --primary-color: #55c5a6; ），并在JS中使用它们：
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
const myStyles = {
  color: `${primaryColor}`,
  backgroundColor: `lighten(${primaryColor}, 10%)`,
return (
  <div style={myStyles} />