vue elementui 的样式修改

checkbox 、dialog

checkbox 👇

需求是，表单项只做展示，禁止操作。但看起来不能是disabled的那种灰色。。。。

这是原先系统默认的样式 ↓ 默认选中样式
这是修改之后的样式 ↓ 改完后的简约样式。。

html部分代码 ↓

<el-checkbox
   label="丧偶"
   onclick="javaScript: return false;"
></el-checkbox>

中间的小勾儿是一个原本是长方形的伪元素，设置好背景色后将长方形旋转然后去掉左边框和上边框。要变更小勾儿的颜色，得和上面的css部分的第二句里的color设置搭配使用。
css部分代码 ↓

>>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266!important;
}
>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background: transparent !important;
  color: #606266 !important;
  border: 1px solid #606266 !important;
}
>>> .el-checkbox__input .el-checkbox__inner {
  border: 1px solid #606266 !important;
}
// 选中时，中间小勾儿的颜色
>>>.el-checkbox__inner::after {
  border: 1px solid #606266!important;
  border-top: 0!important;
  border-left: 0!important;
}

el-dialog 👇

el-dialog一版的样式修改套个类名就成不多说嗷。。但是在它打开时，body上会被加上一个padding-right的样式，导致页面多出一条像是scroll-bar的内边距。
可以选择去掉.el-popup-parent--hidden的padding-right: 17px;
实不相瞒我试过。。这种样式只能加在全局上，但凡在页面样式中加了scoped。。。。它就不生效不道为什么。。好像好多elementui种的样式都是这种？