react多个类名写法

当然我们也可以使用类名的方式控制样式。但是要注意，因为class属性与es6的class关键字会产生冲突，所以在react里面使用了className代替了class属性。

.jsx文件

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文件

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

在react里面还有一个html属性也是和js的关键字冲突的。label标签有一个for属性，也是和js的for是冲突的，所以在react里面使用labelFor来代替(了解)。