最近在寫react的時候碰到了一個小問題：現(xiàn)在css樣式我通過下圖這樣的方式直接引進(jìn)來的時候，發(fā)現(xiàn)會和其他組件里面相同className的會有沖突的現(xiàn)象。正常來說吧，是可以通過不同的組件在className前面加上不同組件的標(biāo)識做區(qū)分的，但是這樣感覺不舒服。寫習(xí)慣了vue的，發(fā)現(xiàn)vue里面是可以加scoped將樣式私有化，那react應(yīng)該也會有類似的解決方案吧。
然后找了下發(fā)現(xiàn)有個叫做css module的。下圖里框著的這剛好就是我想要的。這里是它的地址 CSS Module?
然后看看怎么使用。聽說npm eject是個坑，還好這個也不用去eject，create-react-app 2的版本就可以直接使用了，方便快捷用起來也爽 ~?
1、使用方法的話也比較簡單，正常寫css或者sass之類css預(yù)處理的文件，我這里用的是sass，下圖：
2、然后jsx文件這邊，下圖（框起來的首先是import進(jìn)來，橫線的是使用css文件的className）：
注意：然后有一個需要注意的。默認(rèn)文件名是以 [className].module.scss，就是需要加上.module。本來我也在弄了好久發(fā)現(xiàn)不生效，我就eject出來看到config文件下面有寫著注釋默認(rèn)是需要加上的，當(dāng)然如果配置的話就自己去百度看怎么配置了，我這就不寫了，怎么簡單怎么用~
3、上面是直接單個className的，然后正常來說肯定會有一些通過操作控制className的時候，和最常用的iconfont。多類名你發(fā)現(xiàn)直接逗號隔開或者空格隔開都不生效。
<div className={styles.sideInBox,styles.sideTitleBox}></div>? ? 逗號隔開? ? 跪
<div className={styles.sideInBox? styles.sideTitleBox}></div>? ? ? 空格隔開? ? 還是跪<div className={[`${styles.sideInBox}`,`${styles.sideTitleBox}`].join(' ')}></div>? ? ? ?奶思~
我想~這個都能看懂為啥這么寫吧 ~?
jsx的{}和把className存數(shù)組里，然后join函數(shù)在中間加個空格，就拼出了下面這樣啦
<div class="sideInBox?sideTitleBox"></div>
最后 ~ 有寫錯的地方麻煩可以指出來哦，也是剛接觸幾天然后做個整理，蟹蟹? ~ 。 ~??
