react css module几种写法

react css module几种写法

一、less 文件嵌套写法可读取,但是css不会加上唯一id(类似scopedId)

import './style.less';


function Index(){
return(
  <div className='card-container'>
    <div className='card-info'>
      <div className='card-title' >测试</div>
    </div>
  </div>
)
}
export default Index;

二、 文件命名格式 包含**.module.less,必须包含module.第一种必须不能包含module

import style from './style.module.less';


function Index(){
return(
  <div className={style['card-container']}>
    <div className={style['card-info']}>
      <div className={style['card-title']} >测试</div>
    </div>
  </div>
)
}
export default Index;

三、

import './style.module.less';

export default class Index extends PureComponent {
  render() {
    return <div styleName="aaa">测试</div>;
  }
}