JIYIK CN >

To set background color in React using inline styles:

1. Sets the style attribute on the element style.
2. Set backgroundColorthe property to a specific color.

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>
  );
}

We use the style object's backgroundColorproperty to set the background color of the element.

请注意, multi-word properties like background-color are camel-cased when accessed on style objects.

The value of a style property is enclosed in two sets of curly braces.

<div style={{backgroundColor: 'lime', color: 'white'}}>Avocado</div>

The first set of curly braces in an inline style mark the start of the expression, and the second set of curly braces is an object containing the style and value.

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

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 onClickthe property on the element, so every time it is clicked, the handleClick function will be called.

In our handleClickfunction, we simply toggle isActivethe state.

We can set the state to active, for example setIsActive(true), if you don't want the background color to change every time the element is clicked.

We use the ternary operator to conditionally set styles on an element backgroundColor.

<div
  style={{
    backgroundColor: isActive ? 'violet' : '',
    color: isActive ? 'white' : '',
  }}
  onClick={handleClick}
>
  Hello world
</div>

The ternary operator is if/elsevery similar to the statement.

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

In other words, if isActivethe variable stores a true value, we backgroundColorset the attribute to the color violet, otherwise we set it to the empty string.