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

This article "vue can not cover the UI component of vant how to solve the style of the article, most people do not understand, so the editor summed up the following contents, detailed, clear steps, with a certain reference value, I hope you can read this article can be rewarded, let's take a look at this" vue can not cover the vant UI component style how to solve "article bar.

Cannot override the style of the UI component of vant

Sometimes the default style provided by the UI component can not meet the needs of the project, so we need to modify its style, but we find that the modified style does not work after adding scoped.

Solution method

Use the depth selector to "drill down" the selector in the scoped style, that is, to affect the subcomponents

.a > > .b {/ *. * /}

The above code is compiled into:

.a [data-v-f3f3eg9] .b {/ *... * /}

Note: if you use a preprocessor such as Less or Sass, you may not be able to parse correctly.

In these cases, you can use the combination / deep/ or:: v-deep combination-both are aliases, > >, and work exactly the same.

Using a preprocessor such as Less or Sass is written as follows:

.van-radio {/ deep/. Van-radio__label {width: 500px;}} use style traversal to force overwriting the original Vant style

When using Vant components, we will find that in some situations the original style of the component does not meet our needs, then we need to rewrite the original style of the component.

This is the original style of the component.

Because the scope attribute is added to the style tag, scope protects the style from contamination. For our own style to take effect, we must use style penetration, from the parent style to the child style:

.w-all > .van-field__control {text-align: right;} can be seen in the browser

The text-align:left column has been crossed out and replaced by:

And this is because of the use of style penetration force to overwrite the original style, so as to achieve the style effect we need.

The above is about "vue can not cover the style of vant's UI components how to solve" this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more about the relevant knowledge, please follow 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.