css - 在组件内部引用 SCSS 变量

Question

我试图在我的组件中引用我的 main.scss 文件中的颜色变量，但不确定正确的语法是什么。现在它通过硬编码颜色十六进制值来工作。

我可以通过添加外部样式表并以这种方式引用主题颜色来使其工作，但是不想创建额外的文件而是使用内部样式。

这是 main.scs:

$theme-colors: (
  'primary': #00a677,
);

组件如下:

import React from 'react';

const box = {
  color: '#9D2235',
};

const Box = () => {
 return(
  <div style={box}><h1>I'm A Box!</h1></div>
 )
}

export default Box;

知道我该怎么做吗？

Answer 1

你可以做的是，在盒子组件上放一个类

在 main.scss 中

$primary: #00a677

.box {
   color: $primary
}

在你的组件中

import React from 'react';

const Box = () => {
 return(
  <div className='box'><h1>I'm A Box!</h1></div>
 )
}

export default Box;