CSS Moudules
- CSS Modules 通過對 CSS 類名重命名，保證每個類名的唯一性，從而避免樣式沖突的問題
- 換句話說：所有類名都具有 “區域作用域” ，只在當前組件內部生效
- 實作方式：webpack 的 css-loader 插件
- 命名采用：BEM （Block塊、Element元素、Modifier三部分組成）命名規范，比如：
.list__item_active - 在 React 腳手架中演化成：檔案名、類名、hash(隨機）三部分，只需要指定
類名即可
CSS Modules 在專案中的使用
- 創建名為
[name].module.css的樣式檔案（React 腳手架中的約定，與普通 CSS 作區分）
- 組件中匯入該樣式檔案（注意語法)
- 通過 styles 物件訪問物件中的樣式名來設定樣式
- CSS Modules在專案中的使用
（1）創建名為[name].module.css的樣式檔案(React腳手架中的約定，與普通CSS作區分)
（2）組件中匯入該樣式檔案（注意語法)
（3）通過styles物件訪問物件中的樣式名來設定樣式
- 使用
CSS Modules修改NavHeader樣式
（1）在NavHeader目錄中創建名為index.module.css的樣式檔案，
（2）在樣式檔案中修改當前組件的樣式(使用單個類名設定樣式，不使用嵌套樣式)，
（3）對于組件庫中已經有的全域樣式(比如：.am-navbar-title)，需要使用:global()來指定，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/375920.html
標籤：其他