How to modify the child widget style of the parent widget in vue.

How to modify the child widget style of the parent widget in vue.

During Development Using vue, we sometimes reference external components, including the UI components (ElementUI and iview ).

When the <style> label has the scoped attribute, its CSS only applies to the elements in the current component.

However, after scoped is added to the parent component, the style of the parent component does not penetrate into the Child component. Therefore, writing the style of the Child component in the parent component is ineffective.

1. Remove scoped

After scoped is removed from the <style> of the parent component, the style of the Child component can be written in the parent component, but you will worry that the global style will be contaminated.

[Because we know that the correct position for using the global style is to use a global app.css]

2. Mix local and global styles

You can use a style with a scope and no scope in a component at the same time:

<Style>/* Global style */</style> <style scoped>/* local style */</style>

Write the style of the Child widget to the global style above.

3. Use the depth Selector

If you want a selector in the scoped style to be "more effective", such as affecting sub-components, you can use the >>> OPERATOR:

<style scoped>.a >>> .b { /* ... */}</style>

Some pre-processors such as SASS cannot be correctly parsed >>>. In this case, you can replace it with the/deep/operator -- this is an alias of>, and it works normally.

OK, the main content is the above.

Additional supplements:

1. DOM content created through v-html is not affected by style in scope, but you can still set styles for them through the depth selector.

2. CSS scope cannot replace class

3. Use descendant selector in recursive Components

In the above vue, the method for modifying the child component style of the parent component is all the content that I have shared with you. I hope to give you a reference and support for the customer's house.