Changing CSS properties in React is pretty simple. This post will go over a simple example using a slider control and a drop down to change the CSS properties of a box. The slider control changes the opacity from 0.1 to 1.0. The drop down has a list of colors that change the background-color property.

List of Available CSS Properties

For React: https://github.com/vhpoet/react-native-styling-cheat-sheet

CSS: https://www.w3schools.com/cssref/

Create a Slider, Dropdown, and Box

To keep this example simple but interesting, add a slider control to change the Opacity property of a dark blue box.

CSS

Code for slider control and box App.css.

.App {
  text-align: center;
}
select {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid darkblue;
  border-radius: 4px;
}
input {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid darkblue;
  border-radius: 4px;
}
.container {
  padding-top: 10vw;
  padding-left: 30vw;
  padding-right: 30vw;

}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  background-color: darkblue;
}
.area {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
}


.slidecontainer {
  width: 100%; 
}


.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%;
  height: 25px; 
  background: #d3d3d3; 
  outline: none;
  opacity: 0.7; 
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1; 
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D; 
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D; 
  cursor: pointer;
}

How to use Ref to update CSS

Using ref from ‘react’ we can reference an HTML Tag.

import * as React from 'react';
...
const divRef = React.useRef(null);

Pass the HTML tag to the reference with ref={YOUR_REFERENCE}

 <div className='box' ref={divRef}></div>

Update a CSS Property using the reference.

divRef.current.style.background = value;

Component

Using ref from ‘react’ we can reference the <div> tag that displays the box.

Code for the slider control and box App.js.

import * as React from 'react';
import './App.css';

function App() {
  const divRef = React.useRef(null);
  const [opacity, setOpacity] = React.useState(9);
  const [color, setColor] = React.useState('');

  const handleSliderChange = (event, newValue) => {
    setOpacity(event.target.value);
    divRef.current.style.opacity= event.target.value/10
  };

  const handleColorTextChange = (event, newValue) => {
    setColor(event.target.value);    
    divRef.current.style.background = event.target.value;
  };

  return (
    <div className="App">
      <div className="container">          
      
          <label for="fname"><b>Color</b></label> <br></br>
          <select name="colors" id="colors" onChange={handleColorTextChange}>
            <option value="lightred">Light Red</option>
            <option value="red">Red</option>
            <option value="darkred">Dark Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>            
          </select>
          <br></br>
          <br></br>
          <label for="fname"><b>Opacity</b></label><br></br>
          <input type="range" min="1" max="10" onChange={handleSliderChange} value={opacity}></input>
          <br></br>
          <input type="number" min="1" max="10" onChange={handleSliderChange} value={opacity}></input>
          
          <br></br>
          <div className='box' ref={divRef}></div>
      </div>
    </div>
  );
}

export default App;