覆蓋組件自帶樣式
文章簡介
在組件化的前端頁面中，我們一般會使用與我們應用的風格相近的組件庫，但是我們仍然經常會需要去覆蓋組件自帶的樣式為我們期望的風格，比如設置輸入框的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);
}
設置之后再看瀏覽器，我們的樣式已經覆蓋掉自帶的樣式了：
以上
感謝您花時間閱讀我的博客，若有不對之處，還望指正，期待與您交流。👏👏👏
想要下載筆記文檔的同學請到我的碼雲倉庫進行克隆下載。
本篇博文系原創，僅用於個人學習，轉載請注明出處。👈👈👈