Как добавить переменную Sass к компонентам Styled в реагировать

Question

Мне нужно добавить переменную sass к стилизованным компонентам в реагировать на 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

Этого можно добиться, используя темы в styled-компонентах.Вы можете добавить переменные к ThemeProvider следующим образом:

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

, а затем этот объект можно использовать в styleled-components

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

Для получения дополнительной информации, пожалуйста, проверьте Тематика