How to modify the style of subcomponent through parent component in vue-JS Tutorial-php.cn

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 tag has the scoped attribute, its CSS only applies to elements in the current component.

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 of the parent component, the style of the child component can be written in the parent component , but you may worry that this will pollute the global style.

[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: /* 全局样式 */ /* 本地样式 */ Copy after login

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: .a >>> .b { /* ... */ } Copy after login

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.