className的写法

写法一：命名为search-btn时，会报错，写法如下：

import style from './style.less';

  <Button
                    className={style['search-btn']}
                    type="primary"
                    htmlType="submit"
                  >
                    搜索
                  </Button>

className多种样式的三种写法：

1、 className 利用 ${ }

   className={`${style.fruit} ${style.apple}`}

2、 className join

   className={[style.fruit,style.apple].join(' ')}

3、利用classnames库

  npm install classnames --save
  <div className=classnames({
    'class1': true,
    'class2': true
    )>
</div>

项目中使用classname

使用style引用：

import classnames from 'classnames/bind';
import style from './index.less';
const cx = classnames.bind(style);


<div className={cx('message-read')} >Classname 使用style</div>
<div className={cx('message-read1','message-read2')} >多个classname使用style</div>

 直接使用多个classname使用，不使用style

import './index.less';

<div className='message-read1','message-read2' >直接使用多个classname使用</div>