Because the component library of elementUI is used, a page uses el-dialog, and the style needs to be changed. However, after setting scoped in <style>, the style does not take effect.
Because Vue's scoped labels all labels of this component with a unique attribute, this unique attribute is also attached when the style takes effect. However, all sub-components applied by this component, except the root label, are not labeled with this unique attribute. Therefore, The style will naturally not take effect.
vue automatically adds a unique attribute
A unique attribute is added, which is the principle of vue scoped to achieve style isolation.
If you are not afraid of affecting other pages, delete scoped and the style will take effect.
Solution without deleting scoped:
Checked the official solution
The official solution given by Vue is: Depth action selector
<style scoped>
::v-deep .el-dialog {
background-color: #0c1d3f;
}
</style>You can also use /deep/, >>>, ::v-deep.
/deep/ will report an error in vue 3.0, you can use::v-deep