如何将 Sass 变量添加到 React js 中的样式化组件

Question

我需要将 sass 变量添加到 react js 中的样式化组件中，我已经通过此链接 Sass-extract-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>

样式化组件

const Content = styled.div`
 h1:${}//how i can get variable here
 `;

Answer 1

这可以通过在样式组件中使用主题来实现。您可以将变量添加到ThemeProvider，如下所示：

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

然后这个对象就可以在 styled-components 中使用了

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

更多信息请查看theming