覆蓋元件自帶樣式
文章簡介
在元件化的前端頁面中，我們一般會使用與我們應用的風格相近的元件庫，但是我們仍然經常會需要去覆蓋元件自帶的樣式為我們期望的風格，比如設定輸入框的border顏色，而元件一般在渲染生成後往往不是一個簡單的div，因此我們要覆蓋樣式真的是總是較勁腦汁，以下為我總結的一些比較有效的方法，希望分享給大家。
通常手段有以下3種：
1、內聯樣式：
內聯樣式是權重最高的覆蓋，直接使用可以覆蓋元件的自帶樣式，但是正式開發中較少使用；
2、外聯樣式檔案：
使用css檔案，定義類選擇器或者id選擇器等，去覆蓋元件自帶的樣式，此時一般會需要在選擇器中加入 !important來使樣式強制生效；（!important是強制提高權重的一種手段）
3、特殊情況：
3.1、子類選擇器：
在開發中會碰到特殊情況，導致前兩種方法都不能正常工作；比如一個元件渲染出來後，裡面通常包含有子元件，此時無法使用內聯樣式覆蓋子元件的自帶樣式，也無法在子元件上新增類選擇器，此時就可以通過子類選擇器>來將樣式覆蓋到子元件上。
3.2、before與after選擇器：
before與after是一種可以在元素的內容前後插入內容或設定樣式的選擇器。很多元件自帶的樣式中使用這兩個選擇器做一些樣式設定，如果我們需要覆蓋這些樣式，也是可以通過上述子類選擇器的方式進行覆蓋。
3.3、示例：
由於我是在使用React框架和Material-UI元件庫，因此會使用Material-UI元件來舉例，就算不熟悉也沒有關係，css能看懂就行。
我會設定兩個輸入框（使用者名稱和密碼框），隨後來覆蓋它們的自帶樣式。
<Dialog onClose={handleClose} open={open}>
<div className="container">
<DialogTitle>請登入</DialogTitle>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<TextField type="text" label="使用者名稱" variant="standard" />
<TextField type="password" label="密碼" variant="standard" />
</Box>
</div>
</Dialog>
目前，有兩個輸入框如圖，首先來覆蓋使用者名稱輸入框的下劃線樣式，修改顏色為紅色；雖然這個輸入框自帶color屬性可以修改顏色，但是我們嘗試通過子類選擇器修改。F12開啟控制檯，可以發現，使用者名稱輸入框在程式碼中只是一個TextField標籤，卻渲染生成了一個外部div包裹一個內部lable和內部div的組合標籤。
而下劃線其實就是輸入框div的下部輪廓，也正是如圖樣式，很明顯是元件自帶的類選擇器設定的樣式，於是通過我們描述的方法去修改，程式碼如下：
/* 修改樣式 */
.ffff>div::before {
border-bottom: 2px solid rgba(216, 16, 16, 0.42);
}
<TextField className="ffff" type="text" label="使用者名稱" variant="standard" />
<TextField type="password" label="密碼" variant="standard" />
在執行程式可以發現我們設定的樣式已經生效了，如果沒有生效可以使用!important提高權重，此外記得要引入你的css檔案，否則無論如何也是不會生效的。
然後我們修改使用者名稱框輸入時的樣式，原樣式如下圖：
跟之前同理，此時應修改after，我們將下劃線顏色設定為綠色：
.ffff>div::before {
border-bottom: 2px solid rgba(216, 16, 16, 0.42);
}
.ffff>div::after {
border-bottom: 2px solid rgba(16, 194, 96, 0.42);
}
很明顯，原樣式的類選擇器下已經有了刪除線，我們的樣式已經將它覆蓋掉了，可以對比密碼框的樣式效果。
4、除錯hover樣式：
最後我們要覆蓋使用者名稱輸入框的hover樣式：
如果不知道瀏覽器如何檢視hover樣式請看下圖：（這個是我已經調好的）
首先，原本的hover樣式如圖：
我們已經找到是哪個自帶的類選擇器在設定hover屬性，並找到對應的div，此時就可以通過我們之前的方法來覆蓋hover樣式：
.ffff>div:hover:not(.Mui-disabled):before {
border-bottom: 2px solid rgb(245, 1, 192);
}
設定之後再看瀏覽器，我們的樣式已經覆蓋掉自帶的樣式了：
以上
感謝您花時間閱讀我的部落格，若有不對之處，還望指正，期待與您交流。???
想要下載筆記文件的同學請到我的碼雲倉庫進行克隆下載。
本篇博文系原創，僅用於個人學習，轉載請註明出處。???