Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how vue modifies the style brought by vant. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Modify the style that comes with vant

Today, when writing a page with vue, I found that some UI components of vant can not meet their own style, and it is still invalid to modify the CSS style.

Css generally uses sass or less, and the modified style does not work after adding scoped, even if important is added.

In a vue project, when the style tag has a scoped attribute, its CSS style only acts on the elements in the current component, and the style of the parent component will not infiltrate the child component.

Solution.

1. Works for css syntax

Using the depth selector, use the > operator to "drill down" the selector in the scoped style, that is, to affect the subcomponents

The above code will be compiled into:

two。 For preprocessors such as scss,less

Use the / deep/ operator instead-- this is an alias for >

The code is as follows:

In this way, the modification of the style is effective.

Why can't the style of vant be modified?

When writing in vue, add this scoped to avoid global pollution.

But adding scoped makes it impossible to modify the style in the vant framework component itself, but we can't remove the scoped.

Even if we can't write the style in vant, we can't get rid of it, so how can we implement the style without removing it?

If there is a scss, just add / deep/ to the original style class.

/ deep/. Van-cell {background: # F39894; color: white;} / deep/. Van-icon::before {color: white;}

In this way, you can modify the style of the component even if you have scoped.

These are all the contents of this article entitled "how vue modifies the style that comes with vant". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.