How to write multiple class names in react

Of course, we can also use class names to control styles. But please note that because the class attribute will conflict with the es6 class keyword, className is used instead of the class attribute in react.

.jsx file

import React, { Component } from "react";

export default class MyStyle extends Component {
  render() {
    return (
      <div className="box">
        <div className="title">一个类名</div>
        <div className="title text">两个类名</div>
        <div className={['title','text','font'].join(' ')}>多个类名</div>
      </div>
    );
  }
}

.css file

.box div{
    margin: auto;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}
.title{
    background-color: #fcf;
}
.text{
    color: yellow;
}
.font{
    font-size: 40px;
}

There is also an html attribute in react that also conflicts with the js keyword. The label label has a for attribute, which also conflicts with the for of js, so use labelFor instead in react (understand).