During the learning process, when using the Element-UI component library, I want to modify its default style. I have learned several methods, and I will share it with you here!
First of all, you need to know that after using the component library, you can view the class in the inspection tool. This is added to us by the component library, not written by ourselves. We can use the class added by the component library to modify the style.
For example, the first picture below is a component library I added, and the red box in the second picture is the label added by the component library itself. We can use the class of the label in the red box to modify the style.
When most friends use vue, they must add the scoped attribute to the style tag. This attribute is for the privatization of our components, so that the style of the current component does not affect other components. If your style tag adds the scoped attribute, Then you won’t be able to modify the style directly here, because the style of Element-UI is defined in the global. When using scoped, the local style will be overwritten by the global style. Then there are the following methods to solve this problem:
1. Remove scoped
This method is completely possible, but it may pollute the global style after removing the scoped.
2. Vue supports multiple styles
Unexpectedly, just write another style directly, which does not affect the style in scoped, and modifies the default style of Element-UI.
3. Depth selector
Vue provides a deep selector (deep selector), the format is 'class of the parent tag' /deep/ 'class of the tag to be modified' , which is also useful in scoped style tags. There are two other ways of writing: ::v-deep and >>>.
Effect: (modified width, height and background color)
The above is the method of modifying the default style of Element-UI. The deep selector is very easy to use, everyone can use it!