Import a Reactjs variable into Sass // Assign a ReactJS element class name to a Sass variable

Question

I'm learning some ReactJS and Sass and was wondering if it's possible to import a Reactjs variable into Sass or assign a ReactJS element class name to a Sass variable.

I'm doing a silly quotes machine and I need different elements to change to the same color at the same time when I click a button. I alredy implemented a working solution, but because I'm trying to make a modularized code, I had to use react context and state. I learnt a lot, but I thought about two solutions I guess would be better if I could implement them, that would make the code so much cleaner with no need of context nor state.

I searched hours, but couldn't find a way to import a variable (that would change when I click the button) from the Reactjs file into the Sass file to use it there. Something like this:

Reactjs File:

let num = 0;

function randomNumber() {
  num = Math.floor(Math.random() * (n + 1));
}

render (
   
)

Sass file:

//somehow import num

$color: blue, yellow, green, red...;

$i = num

.RandomColor {
  background-color: nth($color, $i);
}

Found posts saying that I could export a Sass variable into Javascript file, but when I did it in my Reactjs file the variable is undefined.

After searching to that possibility I thought other way to comunicate was to change the class (or other property) of the button when I click it and assign that to a variable that would define the property I need to dynamically change. Something like this:

ReactJs file:

let num = 0;

function randomNumber() {
  num = Math.floor(Math.random() * (n + 1));
}
render (
   
)

Sass file:

$color: blue, yellow, green, red...;

//something like this
$i = .class of #buttonID

.RandomColor {
  background-color: nth($color, $i);
}

Thanks in advance!

user_272188 · Answer

Try to keep the random logic on the React side, and use SASS to define the color table to pick randomly from.

Also, encapsulating this functionality into its own component allows you to utilize the state to update the style. Plus, you can reuse it as much as you want.

» RandomButton.jsx:

import React from 'react';
import './RandomButton.sass';

class RandomButton extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      colorId: 'color_0'
    };
    this.generateRandomColor = this.generateRandomColor.bind(this);
  }
  
  generateRandomColor = (event, min, max) => {
    let num = Math.floor(Math.random() * (max - min) + min);
    let styleId = `color_${num}`;
    
    this.setState({
      colorId: styleId
    });
    
  }
  
  render() {
    
    return(
      
    )
  }
  
}

export default RandomButton;

» RandomButton.sass:

.randomButton
  padding: 5px 10px
  border-radius: 3px
  border: 1px solid black

.color_0
  background-color: #A6BF4B
  color: white
  
.color_1
  background-color: #F2F0D5
  color: black
  
.color_2
  background-color: #F2C53D
  color: black
  
.color_3
  background-color: #B1B1AC
  color: black
  
.color_4
  background-color: #668C4A
  color: white

» Import and add to your app:

import './your/path/to/RandomButton/RandomButton.jsx';

class App extends React.Component {
  
  render() {
    
    return(
      

        
        
        

      
    )
    
  }
  
}

Import a Reactjs variable into Sass // Assign a ReactJS element class name to a Sass variable

1 Answers