Reactjs 如何向react js中的样式化组件添加Sass变量

我需要将sass变量添加到react js中的样式化组件中，我已经完成了这个链接，并且遵循了它们的过程

但我被困在这条线上了

import styled from 'styled-components';

const Button = styled.button`
background-color: ${p => p.theme.primary} //explain this line
`;

我已经创建了var.scss文件并包含

$black:#000000;
$white:#ffffff;
$red:#f64406;
$gray:#333333;
$green:#3bbd47;

在我的渲染中

<div>
  <div>
    <h2>Welcome Back!</h2>
    <h3>Login Your Account</h3>
  </div>

---

这可以通过在样式化组件中使用主题化来实现。您可以按如下方式将变量添加到<代码>的eProvider：

const theme = {
black:#000000,
white:#ffffff
red:#f64406
gray:#333333,
green:#3bbd47
}
<ThemeProvider theme={theme} >
    <App />
</ThemeProvider>

---

有关更多信息，请检查

为什么您首先要声明sass变量以便在CSS inJS中使用它们？好的，知道了，我需要在index.js文件中导入常量变量主题文件，对吗？但是我喜欢这个const-theme=require（

sass-extract-loader？{“plugins”：[“sass-extract-js”]}！./assets/css/var.scss

）；您可以使用npm包将sass变量提取到js对象

const theme = {
black:#000000,
white:#ffffff
red:#f64406
gray:#333333,
green:#3bbd47
}
<ThemeProvider theme={theme} >
    <App />
</ThemeProvider>

const BlackDiv = styled`
  color: ${(props) => props.theme.black}`;