How to modify the style of subcomponent through parent component in vue

Below I will share with you an article on how to modify the style of sub-components in Vue from parent components. It has a good reference value and I hope it will be helpful to everyone.

In development using vue, we sometimes reference external components, including UI components (ElementUI, iview).

When the

But after adding scoped in the parent component, the style of the parent component will not penetrate into the child component, so writing the style of the child component in the parent component has no effect.

1. Remove scoped

After removing scoped from the

[Because we know that the correct way to use global styles is to use a global app.css]

##2. Mix local and global styles

You can use both scoped and unscoped styles in a component:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

We write the styles that need to be modified in the subcomponents in the above global style

3. Use depth-acting selectors

If you want a selector in a scoped style to act "deeper", such as affecting child components, you You can use the >>> operator:

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

Some preprocessors like SASS cannot parse >>> correctly. In this case you can use the /deep/ operator instead - this is an alias for >>> and will work just as well.

OK, the main content is the above points.

What needs to be added is:

1. The DOM content created through v-html is not affected by the styles in the scope, but you You can still style them by applying deep selectors

2. CSS scope cannot replace class

3. Use descendant selectors carefully in recursive components

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Concept and usage of command mode in JS (detailed tutorial)

Use selenium to capture Taobao data information

How to implement map grid using Baidu Map

The above is the detailed content of How to modify the style of subcomponent through parent component in vue. For more information, please follow other related articles on the PHP Chinese website!