Sometimes the default style provided by element cannot meet the needs of the project, and we need to modify the style of our team label, but it is found that the modified style does not work
No. One method
Reason: scoped
Solution: remove scoped
Note: At this time, the style will pollute the global style. You can put it in the public In css
In order to prevent all el-input tags from having this style, you can add a class name to the input in the HTML, such as modInput
The second method
Without removing scoped
Override in the global style. This solution has drawbacks and may pollute the global style. In order not to pollute the global style, you can also add a separate class name
For example, refer to the style of element ui before referencing the global style
The third method
Style Put it in app.vue or the entry file index.vue, and the style will take effect. In order not to pollute other page styles, you can add a separate class name
The fourth method
Use In-depth action selector, you can use the new wording provided by vue-loader. The wording of vue-loader is as follows (install first and use it):
Some preprocessors (such as Sass) may not >>>Resolve correctly. In these cases, you can use the /deep/ combinator-it is an alias, >>> and exactly the same.
Note that sass should use /deep/ instead of >>> this symbol.
The DOM content created by v-html is not affected by the styles in the scope, but you can still style them through the depth of the selector.
The fifth method
Maybe you have encountered this situation and you need to modify the default style of a certain ui framework, but the modification in the scoped style block is unsuccessful. You have to remove the scoped attribute of the style block, or put the style to be changed into the global style and then import it in main.js, or define the style directly in App.vue. These are all possible, but be aware that if the namespace is correct, or you won’t find a style.
Here is another method. In fact, in vue’s SFC, multiple style blocks are allowed. You can use it like this:
———————————————— Copyright Notice: This article is for the CSDN blogger “Boy Fire “Giant” original articles follow the CC 4.0 BY-SA copyright agreement. Please attach the link to the original source and this statement for reprinting. Original link: https://blog.csdn.net/qq_42221334/article/details/88533329