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

Question

我需要在react js的样式化组件中添加sass变量，我已经通过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>

然后可以在样式组件中使用该对象

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

有关更多信息，请检查theming