React使用css module和className多类名设置
最近在写react的时候碰到了一个小问题：现在css样式我通过下图这样的方式直接引进来的时候，发现会和其他组件里面相同className的会有冲突的现象。正常来说吧，是可以通过不同的组件在className前面加上不同组件的标识做区分的，但是这样感觉不舒服。写习惯了vue的，发现vue里面是可以加scoped将样式私有化，那react应该也会有类似的解决方案吧。
正常引入
然后找了下发现有个叫做css module的。下图里框着的这刚好就是我想要的。
css module
然后看看怎么使用。听说npm eject是个坑，还好这个也不用去eject，create-react-app 2的版本就可以直接使用了，方便快捷用起来也爽 ~
1、使用方法的话也比较简单，正常写css或者sass之类css预处理的文件，我这里用的是sass，下图：
scss文件
2、然后jsx文件这边，下图（框起来的首先是import进来，横线的是使用css文件的className）：
CSS Module
注意：然后有一个需要注意的。默认文件名是以 [className].module.scss，就是需要加上.module。本来我也在弄了好久发现不生效，我就eject出来看到config文件下面有写着注释默认是需要加上的，当然如果配置的话就自己去百度看怎么配置了，我这就不写了，怎么简单怎么用~
3、上面是直接单个className的，然后正常来说肯定会有一些通过操作控制className的时候，和最常用的iconfont。多类名你发现直接逗号隔开或者空格隔开都不生效。
1 2 3 4 5 | ~~<div className={styles.sideInBox,styles.sideTitleBox}></div>~~ 逗号隔开 跪 ~~<div className={styles.sideInBox styles.sideTitleBox}></div>~~ 空格隔开 还是跪 <div className={[`${styles.sideInBox}`,`${styles.sideTitleBox}`].join(' ')}></div> 奶思~ |
我想~这个都能看懂为啥这么写吧 ~
jsx的{}和把className存数组里，然后join函数在中间加个空格，就拼出了下面这样啦
1 | <div class="sideInBox sideTitleBox"></div> |
最后 ~ 有写错的地方麻烦可以指出来哦，也是刚接触几天然后做个整理，蟹蟹 ~ 。 ~
以下是原作者
作者：JoseWoo
链接：https://www.jianshu.com/p/ed841bd45004
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。