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;

知道我该怎么做吗？

标签： cssreactjssass

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;