CODEWITHSUNDEEP
reactjssass
JkAlombro
JkAlombro

Reputation: 1824

How to Access SASS/SCSS variables in your React Components inline style

Let's say I have a button style in my JSX like this

const btnStyle = {
  width: '100%',
  backgroundColor: '$green-d1',
  border: 0,
};

how can I access the $green-d1 variable from my scss?

Upvotes: 0

Views: 1380

Answers (1)

Arkellys
Arkellys

Reputation: 7790

1. With Interoperable CSS's :export feature

:export {
  greenD1: $green-d1;
}

import styles from "./styles.scss";

const btnStyle = {
  width: '100%',
  backgroundColor: styles.greenD1,
  border: 0,
};

For this to work, you either need to use CSS module or configure css-loader correctly by setting mode to "icss".

2. With a CSS variable

:root {
  --green-d1: #{$green-d1};
}

const styles = window.getComputedStyle(document.documentElement);
const greenD1 = styles.getPropertyValue('--green-d1');

const btnStyle = {
  width: '100%',
  backgroundColor: greenD1,
  border: 0,
};

Upvotes: 3

Related Questions