vue、Element修改默认样式自定义样式

scoped的作用
scoped是Vue里面style标签的一个特殊属性，当一个style标签拥有scoped属性的时候，就相当于说明它里面的样式只作用于当前这个Vue页面，不会污染到全局的样式，从而实现了组件样式的模块化，那么它是怎么实现的呢？其实如果我们给style标签加上了scoped属性，在编译的时候，他会给我们组件里面的每一个样式加一个自定义的属性data-v-5558821a,从而通过给含有这个自定义属性的标签加上样式，从而实现了部分样式的穿透。所以我们只需要这样：

<style scoped>
    edit_dev >>> .el-checkbox__inner { 
    border-radius: 50%;
// 这里我们要注意，想要修改组件样式的话，必须先用一个原生标签将这个组件包起来，然后通过父查子的方式来找到组件的类，注意这里的>>>是不可少的，要通过这个来查找
}
</style>

完整示例

<el-dialog
    width="560"
    title="群名称"
    :visible.sync="group_chat_name_dialog_display"
    maxlength="30"
    class="re-name"
    append-to-body
>
    <el-input
        @keyup.native.enter="input_group_chat_name"
        v-model="group_chat_name_value"
        placeholder="请输入群名称"
    ></el-input>
</el-dialog>

<style lang="scss" scoped>
 .re-name >>> .el-dialog {
        width: 560px;
        height: 350px;
    }
    .re-name >>> .el-dialog__title {
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(0,0,0,1);
        line-height:16px;
    }
    .re-name >>> .el-dialog__header {
        height: 50px;
    }
    .re-name >>> .el-dialog__body {
        padding: 88px 130px 108px 130px;
        text-align: center;
    }
    .re-name >>> .el-input {
        width: 300px;
    }
</style>