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

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

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

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

这里的.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;
                    }
                }
              }
            }   
          }
        }

//这里是复选框的样式写法，同上一样
/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/了

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