This is a very common problem. This is often encountered when overwriting component styles from third-party Ui libraries. Using both scoped and /deep/ is optimal

Single component page overwrite:

<style scoped>
</style>
Copy the code

To make vUE page styles modular and not globally polluting, it is recommended that the style tag on each page be scoped to indicate that the style belongs only to the current page and that the parent component’s style does not leak into the child component.

But scoped also imposes some additional burdens, such as not being able to override the style of the original component.

Solutions:

Add a div box around the target component and add the depth selector /deep/ or >>>

Use examples:

#outBox /deep/ .el-radio .el-radio__label{
    display:none;
}

#outBox >>> .el-radio .el-radio__label{
    display:none;
}
Copy the code

Global component style overrides:

Usually overridden in imported main. CSS or index.css files.

Or just overwrite it in the UI library style file.

But tears and achievement ^_^