preface

To make styles private in a VUE project, we might add the scoped attribute to the style tag. This prevents the styling of the current component from affecting the styling of other components, but it introduces a new problem: The styling of Element’S UI is not easy to modify.

The analysis reason

Let’s first look at the button style of the el-Input-Number component.

You can see the custom data-v-xxxxx attribute on the el-Input-Number component’s div tag after using the scoped attribute.

When we write el-input-number__increase directly, you can look at the Styles in the el-input-number__increase tag under console ELements and see that it is not added!

So we need to figure out a way to add.

  • Why didn’t you add it?
  • Because the element-UI style written under Scoped is overwritten by its original global style.

Problem solving

  • Method 1: Use the >>> depth operator to make the selector deeper.

As you can see, using the >>> operator, we add [data-v-xxxxxx] to the name of our el-input-class.

  • Method 2: Maybe our project will use a preprocessor like SCSS, which is not available>>>We need to use/deep/

To replace it.

The last

  • The article is their own hand knock, is the summary of daily work, if there are mistakes, please correct
  • If you encounter any problems, please leave a message, you can help solve it together