常见的样式的添加方式
<div className='wrap'>
<Slide rotationMap={this.state.rotationMap}/>
</div>
除此之外,还有另外的方法,使用之前要先开启css module,在webpack中添加 modules:true的配置
{
test: /\.scss$/,
exclude:[/node_modules/],
use:[
{loader:'style-loader'},
{
loader:'css-loader',
options:{
modules:true
}
},
{loader:'sass-loader'}
]
}
使用步骤
1)首先引入css
import home from './index.scss';
写法有以下两种
1)
<div className={home.wrap}>
<Slide rotationMap={this.state.rotationMap}/>
</div>
2)
<div className={home['wrap']}>
<Slide rotationMap={this.state.rotationMap}/>
</div>
如果变量名称是几个字符的拼接,如lg-orders就必须使用第二种写法
<div className={home['lg-orders']}>
<Slide rotationMap={this.state.rotationMap}/>
</div>