Sometimes you need to conditionally change element’s appearance, usually in response to user’s actions. Let’s explore how to do that in React.

TL;DR summary

1. Use curly braces to set element’s style to a JavaScript expression.

<h1 style={{color: "red"}}>Hello World</h1>

Notice double curly braces. One pair to insert dynamic expression in JSX. And another pair of curly braces for an object.

2. Write inline styles as JavaScript object

<h1 style={{color: "red", backgroundColor: "white"}}>Hello World</h1>

Inline styles should be written as an object. Properties and values correspond to CSS properties and values.

You need to write CSS properties in camelCase. This is necessary for CSS properties that are multiple words. For example, background-color in CSS becomes backgroundColor.

3. Conditionally style the element in React

<h1 style={{ color: danger ? "red" : "black" }}>Hello World</h1>

You can use a ternary operator or logical operator to conditionally style the element.

First, we use a ternary operator to conditionally generate value for color property.

We check danger variable to see if it evaluates to true or false. If it’s true, then ternary operator will return “red”. If not, “black”.

Conditional Styling in React – Example

React components are written in JavaScript, even parts that look like HTML. This is JSX, which allows you to use familiar syntax to build apps.

On the surface, JSX looks identical to HTML. But there are several important differences, one of them is the ability to apply conditional inline styles in React.

JSX allows you to embed JavaScript expressions inside your component structure.

<h1 style={{ color: danger ? "red" : "black" }}>Hello World</h1>

In other words, value for the style attribute can be a dynamic expression as well. You can use logical operators like AND (&&) and OR (||), as well as ternary operators to return values based on a condition.

Let’s look at a simple example of conditional styling in React:

function App() {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <div
      style={{
        backgroundColor: darkMode ? "black" : "white",
        color: darkMode ? "white" : "black",
      }}
    >
      <h1>Hello, World</h1>
      <button onClick={() => setDarkMode(!darkMode)}>Flip the switch</button>
    </div>
  );
}

In JSX, styles attributes needs to be set to an object value, where properties and values represent respective properties and values in CSS.

One difference is that unlike CSS, names of properties and values are camelCased.

Add styles conditionally

In previous examples, we saw how to conditionally return a value for a specific style.

Now let’s see how to conditionally decide whether or not to apply a style.

Let’s say you want the paragraph element to have a bigger font size if a certain condition is true. If not, paragraph text should look normal.

<p { largerText ? style={{fontSize: 25}} : null }>Hello World</p>

You can use curly braces {} and a ternary operator to conditionally return style attribute to increase font size.

UX