React樣式衝突解決問題的方法

2023-03-11 06:00:50

前言：

1、React最終編譯打包後都在一個html頁面中，如果在兩個元件中取一樣類名分別參照在自身，那麼後者會覆蓋前者。
2、預設情況下，只要匯入了元件，不管元件有沒有顯示在頁面中，元件的樣式就會生效。

解決方案：

手動處理（起不同的類名，但是專案一大就會導致類名很亂，不利於團隊共同作業）
CSS IN JS ： 以js的方式來處理css（推薦）
css不是一門程式語言，css沒有所有的區域性作用域全域性作用域這樣的區分。。。css只有全域性作用域

CSS IN JS

一、概念

CSS IN JS：是使用 JavaScript 編寫 CSS 的統稱，用來解決 CSS 樣式衝突、覆蓋等問題

CSS IN JS 的具體實現有 50 多種，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等

推薦使用：CSS Modules （React腳手架已整合，可直接使用）

二、CSS Modules

CSS Modules 通過對 CSS 類名重新命名，保證每個類名的唯一性，從而避免樣式衝突的問題
換句話說：所有類名都具有“區域性作用域”，只在當前元件內部生效
在 React 腳手架中：檔名、類名、hash（隨機）三部分，只需要指定類名即可 BEM
xxxx.module.css

1、自動生成的類名，我們只需要提供 classname 即可
[filename]_[classname]_[hash]
2、
類名：.error {} .red{}
實際生成的類名為：.NavHeader_error__ax7yz .NavHead_red_abcdc (相同命名的類名，經過module處理以後，會生成不同的實際類名，特殊標識)