Reference SCSS Variable Internally Within Component

Question

I'm trying to reference a color variable from my main.scss file within my component but not sure what the correct syntax is. Right now it works by hard coding the color hex value.

I can make it work by adding an external stylsheet, and referencing the theme color that way however don't want to create an extra file but rather use internal styling.

Here's main.scs:

$theme-colors: (
  'primary': #00a677,
);

Here's the component:

import React from 'react';

const box = {
  color: '#9D2235',
};

const Box = () => {
 return(
  <div style={box}><h1>I'm A Box!</h1></div>
 )
}

export default Box;

Any idea how I can do this?

Michael · Accepted Answer · 2019-08-27 00:09:34Z

1

What you can do is, put a class on the box component

In main.scss

$primary: #00a677

.box {
   color: $primary
}

In your component

import React from 'react';

const Box = () => {
 return(
  <div className='box'><h1>I'm A Box!</h1></div>
 )
}

export default Box;

answered Aug 27, 2019 at 0:09

Michael

3352 silver badges10 bronze badges

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

2 Comments

Eric Nguyen Over a year ago

That is an option, but I really wanted to separate the main styling from component specific styling.

Michael Over a year ago

@EricNguyen Do you mean is you have main.scss that contains all of the styling variables and you also have separate scss for the components? If that's the case, you can store all your styling variables to main.scss and just import main.scss to the other scss that being used by the component you wanted to use the variable. You may refer to this sass documentation sass-lang.com/documentation/at-rules/import

Collectives™ on Stack Overflow

Reference SCSS Variable Internally Within Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related