在很多情況下，我們需要修改 element-ui 提供的原生樣式，來(lái)滿(mǎn)足項(xiàng)目的需求
然而 常規(guī)的CSS寫(xiě)法可能不會(huì)生效
因?yàn)楫?dāng)我們?cè)谠创a中引用 <el-xxx> 標(biāo)簽時(shí)，實(shí)際上 瀏覽器可能會(huì)渲染出好幾個(gè)對(duì)應(yīng)的 class
例如：
引用 <el-radio-button> 時(shí)
瀏覽器會(huì)渲染出如下的DOM結(jié)構(gòu)：
<label data-v-7cc60609="" role="radio" tabindex="-1" class="el-radio-button">
<input type="radio" name="顏色" tabindex="-1" class="el-radio-button__orig-radio" value="1">
<span class="el-radio-button__inner">白色</span>
</label>
在修改樣式之前，我們必須先弄清楚元素之間的層級(jí)關(guān)系
下面介紹2種修改 element-ui 原生樣式的方法
方法一：
在原有的<style scoped>標(biāo)簽外部，新建一個(gè)不帶scoped的<style>標(biāo)簽
/// 修改單選按鈕的樣式
.el-radio-button__inner {
height: .6rem;
padding: .16rem .2rem;
margin-right: .25rem;
border: 1px solid #FFFFFF;
border-radius: .4rem;
background: #F0F0F0;
}
但是這種方法會(huì)導(dǎo)致 el-radio-button__inner的樣式 滲透到子組件中
很有可能會(huì)影響后續(xù)的開(kāi)發(fā)和維護(hù)
方法二：使用深度選擇器
例如：我們想修改按鈕被點(diǎn)擊之后的樣式
選中某個(gè)按鈕后，F(xiàn)12打開(kāi)瀏覽器開(kāi)發(fā)者工具
image.png
發(fā)現(xiàn) 按鈕被選中后 作用的樣式寫(xiě)在這個(gè)類(lèi)名之下
此時(shí)我們就可以使用 /deep/ 前綴 通過(guò)深度選擇器 來(lái)“穿透”這個(gè)樣式
<style scoped lang="less">
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
color: #FF3333;
border-color: #FF3333;
box-shadow: none;
}
這樣，我們就能夠在不污染其他組件的情況下，按照自己的需求 修改element-ui的原生樣式了
