How to Apply Conditional Styles in React

Irakli Tchigladze Feb 02, 2024
  1. Conditional Styles in React
  2. Apply Conditional Classes in React
How to Apply Conditional Styles in React

React is a popular front-end framework because it gives you the freedom to build beautiful, responsive UI. Styling is one of the most important aspects of this process.

In this article, we want to show multiple ways to apply conditional styles in React.

Conditional Styles in React

The library allows you to store user inputs as values and apply conditional styles depending on the user’s overall actions and input.

Apply Inline Conditional Styles in JSX

The first and obvious way is to define inline styles. Unlike HTML, inline styles in JSX are valid JavaScript.

For this reason, you are free to use ternary operators to set up a condition to determine the value of a certain style. For example, you can do the following:

export default function App() {
  let danger = true;
  return (<div className = 'App'><h1 style = {
    {
      color: danger ? 'red' : 'green'
    }
  }>Some Text</h1>
    </div>);
}

This translates into: if the value of the danger variable is true, then the color CSS property must have the value of red. If not, then it will be green.

You can define style objects outside the JSX, as well as inside it. You must use double curly braces if you apply styles directly as you invoke the component.

You need the first pair of curly braces to tell JSX that the content inside it is a JavaScript expression. You need the second pair as opening and closing tags for an object in JavaScript.

Here is how to define the style object outside JSX and only reference it in the JSX:

export default function App() {
  let danger = true;
  let inlineStyle = { color: danger ? "red" : "green" };
  return (
    <div className="App">
      <h1 style={inlineStyle}>Some Text</h1>
    </div>
  );
}

This is a more readable approach to defining inline styles for some people. Go to CodeSandbox to check the live demo.

Apply Conditional Classes in React

Some people prefer to apply classes rather than inline styles. The principle is the same.

We use ternary operators to generate a dynamic class name. You can go even further and provide three options:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
    </div>
  );
}

In this case, we check if the danger variable is true.

If it is, we apply the dangerText class. If not, we again check if the warning variable is true.

If it is, we apply the warningText class. If not, we apply regularText.

Note that we use the className attribute to apply classes to elements in JSX.

Conditionally applying classes instead of inline styles gives you more freedom to customize the appearance of elements using CSS.

Use Template Literals to Conditionally Apply Classes in React

You can also use template literals to apply the value of a variable as a class name. Then you can dynamically change the value of the variable.

You can combine static and dynamic class names as well. Let’s take a look at the example:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
    </div>
  );
}

If the errorNotification variable contains a value warning, then the className attribute will have two values, large and warning.

Use the classnames Package to Conditionally Apply Classes in React

Finally, many people use an external package called classnames to apply classes in React dynamically.

The classnames() function accepts an object with potential class names as properties and conditions for applying them as values. Let’s take a look:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={classNames({warningText: error})}>Some Text</h1>
    </div>
  );
}

Read the official docs to learn more about the package’s functionality.

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

Related Article - React Style