How To Set Background Color With Inline Styles In React

In this tutorial, you will find detailed instructions on how to set background color with inline Styles in React. Let’s see how we do that.

Set background color with inline Styles in React

With React, inline styles are not represented by a string but by an object.

We can create variables to store these style objects and pass them to the element, or we can style the element directly. 

Take a look at this example for a better understanding:

export default function App() {

const heightValue = "80px"

  return (
    <>
        <div style={{margin: '20px', backgroundColor: 'green',margin: '10px', textAlign: 'center'}}>
              <h1>We are LearnShareIt</h1>
        </div>

        <div style={{margin: '20px', backgroundColor: 'yellow',margin: '10px', textAlign: 'center', height: heightValue }}>
              <h1>Demo Program</h1>
        </div>
    </>
  );
}

Output:

In this example, we have created two div elements and set their background color. The first element is ‘green’, and the second is ‘yellow’. In the style object of the second div element, I passed a variable (heightValue) containing the value of the height property instead of passing the value directly.

Let me give you another more vivid example of setting the element’s background color. We use the onClick() method to change the value of the element’s backgroundColor property when the user takes action.

import {useState} from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleChangeColor = () => {
    setIsActive(current => !current);
  };

  const color1Code = '#F5B401'
  const color2Code = '#A569BD'

  return (
    <div style={{margin: '20px', backgroundColor: isActive ? color2Code : color1Code,
                                  color: 'black',
                                  margin: '10px', textAlign: 'center'}}>
      <h1>We are LearnShareIT</h1>
      <img src='https://learnshareit.com/wp-content/uploads/2022/09/cropped-learnshareit-logo.png' style={{borderRadius: '20px'}}/>
    
      <br />
      <br />
      
      <div class="d-grid gap-2">
      <button style={{align: 'center'}} onClick={handleChangeColor} type="button" class="btn btn-primary">Change Color</button>
      </div>

    </div>
  );
}

Output:

A button is created to listen to the onClick() event. Every time the user presses the button, the value of the state variable isActive will change from true to false or vice versa.

Another difference here is we use hexadecimal color codes for this example instead of the specific color’s name. The hexadecimal color code is specified as #RRGGBB with three colors: red, green, and blue, corresponding to (R, G, and B). From these three primary colors, you can create millions of different colors.

Specifically, in this example, if the value of the isActive variable is true, we use the color code #A569BD. Otherwise, #F5B401 is used.

Summary

That’s all I want to cover in this article. You have just learned how to set background color with inline Styles in React. We hope the above information will help you in your project. Thanks for reading!

Maybe you are interested:

• Get the value of an Input field using a Ref in React
• Set CSS display: none conditionally in React
• Prevent multiple Button clicks in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js