如何覆蓋元件的自帶樣式

孤影的部落格發表於2021-10-27
元件

覆蓋元件自帶樣式

文章簡介

在元件化的前端頁面中，我們一般會使用與我們應用的風格相近的元件庫，但是我們仍然經常會需要去覆蓋元件自帶的樣式為我們期望的風格，比如設定輸入框的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);
}

設定之後再看瀏覽器，我們的樣式已經覆蓋掉自帶的樣式了：

以上

感謝您花時間閱讀我的部落格，若有不對之處，還望指正，期待與您交流。???

想要下載筆記文件的同學請到我的碼雲倉庫進行克隆下載。

本篇博文系原創，僅用於個人學習，轉載請註明出處。???

相關文章