The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect

Although the default style has been able to meet many needs when usingelement-ui, there are always some custom needs to be added sometimes. However, sometimes the style is written on it, which should be correct in theory, but it does not take effect.
In fact, when vueusing a third-party framework in a project, this problem may occur. The reason is vuethat it scopedcan be declared that the style is effective within the scope of the component. So as to avoid style pollution of different components, but most people write with scopedthem, so the style scopeddoes not take effect in the domain.
Solution:

1. Remove scoped

Directly <style lang="less" scoped>in scopedto remove it so that style to take effect, although simple and crude but it is not a good method.

2. Use deep action selectors

Used >>>as a deep-action selector in css

<style scoped>
 .box >>> .el-input {
   width: 60px;
 }
 </style>

Used /deep/as a deep-action selector in less

<style lang= "less" scoped>
 .avatar-uploader /deep/ .el-upload {
   border: 1px dashed #
   d9d9d9; border-radius: 6px;
   cursor: pointer;
 }
 </style>

3. Use global styles

Define a global style, such as global.css, and then main.jsimport it in, so that this style is globally mounted, and the custom styles written in it will also take effect.

ProgrammerAH

Programmer Guide, Tips and Tutorial

The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect

1. Remove scoped

2. Use deep action selectors

3. Use global styles

Read More:

Leave a Reply Cancel reply