Configure Multiple Class Names in React

In React, there are various ways to apply multiple CSS class names to an element.

1. name of the class

const classNames = 'class1 class2 class3';
return <div className={classNames}>Hello World</div>;

1. Template strings: Using the ES6 template string syntax, concatenate multiple class name strings together in template string form. For example:

const class1 = 'class1';
const class2 = 'class2';
const class3 = 'class3';
const classNames = `${class1} ${class2} ${class3}`;
return <div className={classNames}>Hello World</div>;

1. class name

const classNames = ['class1', 'class2', 'class3'];
return <div className={classNames.join(' ')}>Hello World</div>;

1. the names of classes
2. class names

import classNames from 'classnames';
const class1 = 'class1';
const class2 = 'class2';
const class3 = 'class3';
const classNames = classNames(class1, class2, class3);
return <div className={classNames}>Hello World</div>;

The above are some commonly used methods for configuring multiple CSS class names. Depending on specific needs and project situations, you can choose the appropriate way to handle class name configurations.