How to add Sass variable to Styled components in react js

Question

I need to add sass variable to styled components in react js ,I have go through this link Sass-extract-js and i have followed their procedure.

but i'm stuck in this line

import styled from 'styled-components';

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

I have created var.scss file and contains

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

In my render

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

Styled component

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

Why would you like to declare sass variables in order to use them in CSS-inJS in the first place ? — 3Dos
– 3Dos, Commented Sep 25, 2018 at 6:23

Umair Farooq · Accepted Answer · 2018-09-25 06:30:12Z

1

This can be achieved by using theming in the styled-components. You can add variables to ThemeProvider as follows:

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

and then this object can be used in the styled-components

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

For more info please check theming

answered Sep 25, 2018 at 6:30

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ok got it i need to import that constant variable theme file in index .js file right ?

but i did like this const theme = require(sass-extract-loader?{ "plugins": ["sass-extract-js"] }!./assets/css/var.scss);

You can use npm package npmjs.com/package/sass-vars-to-js to extract sass variable to js object