elementUI radio修改单选框多选框选中样式及自定义其他样式

最近vue开发，遇到一个页面样式上的问题，单选框和多选框的样式显示问题，看下图片吧：

这是官方组件的显示效果，项目效果需求如下图

找了很多资料，最后终于解决了，边看代码边解释吧：

```css

这里的.right是我自定义的类名，父盒子，我的单选组是直接放在这个盒子里面的，下面的写法是vue的scss写法，不懂得可以先去了解一下；

  .right{   

          width: 40%;

          border-bottom: 1px solid #cacaca;             

          /deep/{

            .el-radio{

              //从这里开始 就是更改颜色的代码，将你的颜色          改掉我的颜色就可以了

              .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

//这里是复选框的样式写法，同上一样

/deep/{

            .el-checkbox{

              //从这里开始 就是更改颜色的代码，将你的颜色          改掉我的颜色就可以了

              .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/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

例如我在一个商城的项目使用了mint-ui的radio组件，此时mint-ui已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响

与此同时我只想要修改这个地方的样式，在其他页面用到mint-ui的时候不变，我就可以用/deep/了

好了，里面的颜色和样式修改根据个人需求来，我这里就不多做解释了哈，希望对你们有帮助！