Setting background color with inline Styles in React

avatar

Borislav Hadzhiev

Last updated: May 1, 2022

banner

Check out my new book

Setting background color with inline Styles in React #

To set the background color with inline styles in React:

  1. Set the style prop on the element.
  2. Set the backgroundColor property to the specific color.
App.js
import {useState} from 'react'; export default function App() { const [isActive, setIsActive] = useState(false); const handleClick = () => { // 👇️ toggle setIsActive(current => !current); // 👇️ or set to true // setIsActive(true); }; const bgColor = 'salmon'; return ( <div> {/* ✅ set background color */} <div style={{backgroundColor: 'lime', color: 'white'}}>Avocado</div> <br /> {/* ✅ set background color using a variable */} <div style={{backgroundColor: bgColor, color: 'white'}}>Apple</div> <br /> {/* ✅ set background color on click */} <div style={{ backgroundColor: isActive ? 'violet' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Hello world </div> </div> ); }

set background color inline style

We used the backgroundColor property on the style object to set an element's background color.

Note that multi-word properties like background color are camel-cased when accessed on the style object.

The value of the style property is wrapped in 2 sets of curly braces.

App.js
<div style={{backgroundColor: 'lime', color: 'white'}}>Avocado</div>
The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

If you need to set the background color of an element on click, use a state variable to track the clicked state.

App.js
import {useState} from 'react'; export default function App() { const [isActive, setIsActive] = useState(false); const handleClick = () => { // 👇️ toggle setIsActive(current => !current); // 👇️ or set to true // setIsActive(true); }; return ( <div> {/* set background color on click */} <div style={{ backgroundColor: isActive ? 'violet' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Hello world </div> </div> ); }

We set the onClick prop on the element, so every time it is clicked, the handleClick function is invoked.

In our handleClick function, we simply toggle the isActive state.

You could set the state to active, e.g. setIsActive(true), if you don't want to change the background color every time the element is clicked.

We used a ternary operator to conditionally set the backgroundColor style on the element.

App.js
<div style={{ backgroundColor: isActive ? 'violet' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Hello world </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 isActive variable stores a true value, we set the backgroundColor property to violet, otherwise set it to an empty string.

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.