最近vue開(kāi)發(fā)，遇到一個(gè)頁(yè)面樣式上的問(wèn)題，單選框和多選框的樣式顯示問(wèn)題捅儒，看下圖片吧：
這是官方組件的顯示效果，項(xiàng)目效果需求如下圖
找了很多資料，最后終于解決了野芒，邊看代碼邊解釋吧：
```css
這里的.right是我自定義的類(lèi)名蓄愁，父盒子，我的單選組是直接放在這個(gè)盒子里面的狞悲，下面的寫(xiě)法是vue的scss寫(xiě)法撮抓，不懂得可以先去了解一下；
? .right{? ?
? ? ? ? ? width: 40%;
? ? ? ? ? border-bottom: 1px solid #cacaca;? ? ? ? ? ? ?
? ? ? ? ? /deep/{
? ? ? ? ? ? .el-radio{
? ? ? ? ? ? ? //從這里開(kāi)始 就是更改顏色的代碼摇锋，將你的顏色? ? ? ? ? 改掉我的顏色就可以了
? ? ? ? ? ? ? .el-radio__label{
? ? ? ? ? ? ? ? color: #000 !important;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? .el-radio__input{? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? margin-bottom: px(5);
? ? ? ? ? ? ? ? &.is-checked {
? ? ? ? ? ? ? ? .el-radio__inner{
? ? ? ? ? ? ? ? ? ? background-color:#28D4C1;
? ? ? ? ? ? ? ? ? ? border-color:#28D4C1;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .el-radio__inner{
? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? border-color:#28D4C1;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }?
? ? ? ? ? }
? ? ? ? }
```
```css
//這里是復(fù)選框的樣式寫(xiě)法丹拯，同上一樣
/deep/{
? ? ? ? ? ? .el-checkbox{
? ? ? ? ? ? ? //從這里開(kāi)始 就是更改顏色的代碼，將你的顏色? ? ? ? ? 改掉我的顏色就可以了
? ? ? ? ? ? ? .el-checkbox__label{
? ? ? ? ? ? ? ? color: #000 !important;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? .el-checkbox__input{? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? margin-bottom: px(5);
? ? ? ? ? ? ? ? &.is-checked {
? ? ? ? ? ? ? ? .el-checkbox__inner{
? ? ? ? ? ? ? ? ? ? background-color:#28D4C1;
? ? ? ? ? ? ? ? ? ? border-color:#28D4C1;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .el-checkbox__inner{
? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? border-color:#28D4C1;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }?
? ? ? ? ? }
```
/deep/的意思大概為深入的荸恕，深遠(yuǎn)的乖酬。無(wú)意中看到css中有關(guān)于這種寫(xiě)法，開(kāi)始沒(méi)太注意 融求，以為是組件css的寫(xiě)法咬像，后來(lái)才發(fā)現(xiàn)不是。我們都知道Scoped CSS規(guī)范是Web組件產(chǎn)生不污染其他組件生宛，也不被其他組件污染的CSS規(guī)范县昂。這樣在打包的時(shí)候會(huì)生成一個(gè)獨(dú)一無(wú)二hash值，這樣父組件的樣式就不會(huì)影響到子組件了陷舅，然后你要想修改子組件的樣式倒彰，一般是提取一個(gè)公共文件，在公共文件里面修改樣式莱睁，但是這樣也存在著一個(gè)問(wèn)題待讳，比如你使用了別人的組件或者自己開(kāi)發(fā)一個(gè)組件，有時(shí)候你修改一處就可能影響到別的地方仰剿，這個(gè)時(shí)候要么你不用別人的組件创淡，自己重新封裝一個(gè)，但很多時(shí)候是不太現(xiàn)實(shí)的南吮，所以就需要有一個(gè)方法或者方式琳彩，既不影響到別的地方，又能修改子組件在當(dāng)前的樣式旨袒。
例如我在一個(gè)商城的項(xiàng)目使用了mint-ui的radio組件，此時(shí)mint-ui已經(jīng)有默認(rèn)的樣式了术辐，我可以通過(guò)提取公共文件的方式來(lái)修改砚尽，以達(dá)到自己想要的，但是同時(shí)其他地方也會(huì)受到影響
與此同時(shí)我只想要修改這個(gè)地方的樣式辉词，在其他頁(yè)面用到mint-ui的時(shí)候不變必孤，我就可以用/deep/了
好了，里面的顏色和樣式修改根據(jù)個(gè)人需求來(lái)，我這里就不多做解釋了哈敷搪，希望對(duì)你們有幫助兴想！
