JIYIK CN >

Conditionally setting styles in React:

1. Sets the attribute on the element style.
2. Use the ternary operator to conditionally set the value of a CSS property.
3. For example, backgroundColor: count > 0 ? 'lime' : 'salmon'.

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;

Below is the example css file.

.bg-salmon {
  background-color: salmon;
}

.bg-lime {
  background-color: lime;
}

.text-white {
  color: white;
}

We use the ternary operator to conditionally set the style or class name of an element.

<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 if/elsethe statement.

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

In other words, if countthe value stored in the variable is greater than 0, we set the backgroundColor CSS property to lime, otherwise we set it to salmon.

If we have to insert variables in styles, use template literals.

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;

注意, strings are enclosed in backticks `` instead of single quotes.

The dollar sign and curly brace syntax allows us to use placeholders that are evaluated.

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 that we wrap the template literal in mark the beginning of the expression that must be evaluated.

The code between the opening and closing curly braces is just JavaScript, so any variables or expressions we use in the template literal will be evaluated.