Styling elements is one of the most important tasks when building interactive apps in React. Familiar syntax of JSX allows you to easily add classes and inline styles like you’re used to in HTML.

Let’s see how to apply more than one class in React.

Add multiple class values in React

In React, you can set multiple classes the same way as in HTML. Simply separate multiple class names by space, and you can add as many as you’d like.

<h1 className="large title">Hello World</h1>

In this case, both className values will be applied – large and title. All CSS properties from two classes will be applied.

This is practically the same as setting multiple class values in HTML.

There are a few, but important differences between HTML and JSX syntax.

For starters, JSX allows us to add dynamic className values, so you have more room for implementing dynamic features. Another is name of the attribute itself – in JSX we need to use className, not class.

Add one of the classes conditionally

Sometimes you need to set multiple className values, and one of them needs to be dynamic.

In other words, some className values always apply, others apply based on a condition, or value of the className is a variable that might change.

 In my opinion, the simplest way is by using template literals.

function App() {
  const size = "large";
  return (
    <div className="App">
      <h1 className={`${size} title`}>Hello World</h1>
    </div>
  );
}

Template literals are like normal strings, except some parts of the string can be dynamic, while others are static, like a normal string. We use backticks (`) instead of normal quotes to mark beginning and end of template literals.

Dynamic parts of the string need to be marked with a dollar sign $ and curly braces.

Dynamic parts of the string can be any expression – a variable, value form the state, props, or even a condition based on any of these values.

In this case, size is a variable, so its value is dynamic. The second className value ‘title’ is static, and will be applied like a normal string.

Now let’s see how to combine dynamic and static values into one string without using template literals.

Concatenation to set multiple classes in React

If for some reason you can’t use template literals, you can concatenate string values.

Simply use an addition operator (+) to combine multiple pieces of string into one.

<h1 className={size + " " + "title"}>Hello World</h1>

In this example, one of the values is dynamic, other is static. So you can not set className to a simple string. You need curly braces to set className to a JavaScript expression.

Note that you also need to add space between two values. Otherwise the combined string will be interpreted as a single value.

classnames() function to manage multiple className values

Classnames() is a simple but very useful JavaScript utility for managing multiple classname values.

At its simplest, it’s a function that takes multiple string arguments. Each string will be added as className value for the element.

<h1 className={classnames('large', 'title')}>Hello World</h1>

One of the arguments can be an object, where property represents a className value. If property value evaluates to true, it’s added as a className value. This is very useful if one of multiple className values needs to be conditional, or even based on multiple conditions.

You can read more about classnames() utility on its npm page.

UX