Conditionally setting Styles in React

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

Conditionally setting Styles in React #

To conditionally set styles in React:

  1. Set the style prop on an element.
  2. Use the ternary operator to conditionally set the value of a CSS property.
  3. For example, backgroundColor: count > 0 ? 'lime' : 'salmon'.
App.js
import './App.css'; import {useState} from 'react'; const App = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(current => current + 1); }; return ( <div> <div style={{ backgroundColor: count > 0 ? 'lime' : 'salmon', color: count > 2 ? 'white' : null, }} > Count: {count} </div> <br /> <div className={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${ count > 2 ? 'text-white' : null }`} > Count: {count} </div> <br /> <button onClick={handleClick}>Click</button> </div> ); }; export default App;

And here is the css file for the examples.

App.css
.bg-salmon { background-color: salmon; } .bg-lime { background-color: lime; } .text-white { color: white; }

set style conditionally

We used the ternary operator to conditionally set styles or class names on an element.

App.js
<div style={{ backgroundColor: count > 0 ? 'lime' : 'salmon', color: count > 2 ? 'white' : null, }} > Count: {count} </div> <div className={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${ count > 2 ? 'text-white' : null }`} > Count: {count} </div>

The ternary operator is very similar to an if/else statement.

It checks if the value to the left of the question mark is truthy, and if it is, the operator returns the value to the left of the colon, otherwise the value to the right is returned.

In other words, if the count variable stores a value greater than 0, we set the backgroundColor CSS property to lime, otherwise we set it to salmon.

If you have to interpolate a variable in a style, use a template literal.

App.js
import {useState} from 'react'; const App = () => { const width = 300; const height = 150; return ( <div> <div style={{ width: `${width}px`, height: `${height}px`, backgroundColor: 'hi'.length === 2 ? 'lime' : 'salmon', }} > Hello world </div> </div> ); }; export default App;
Note that the string is enclosed in backticks ``, not in single quotes.

The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.

App.js
import './App.css'; import {useState} from 'react'; const App = () => { const myClass = 'bg-salmon'; return ( <div> <div className={`text-white ${myClass}`}>Some content here</div> <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}> Some content here </div> </div> ); }; export default App;

The curly braces we wrapped the template literal in mark the beginning of an expression that has to be evaluated.

The code between the opening an closing curly brace is just JavaScript, so any variable or expression we use in our template literals will get evaluated.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.