Home » vue » Inherit CSS in Vue components

Inherit CSS in Vue components

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have two components that they have a childs in router like this:

{
        path: '/admin',
        component: AdminMain,
        children:[
            {
                path: '/admin',
                component: AdminHome,
                name: 'AdminHome'
            }
        ]
 },
 {
        path: '/',
        component: Home,
        children:[
            {
                path: '/',
                component: Index,
                name: 'Index'
            }
        ]
 }

I want to do two separate layout for these components so their childs inherit parents css. It is possible ? At the moment I load css file in every component with scoped because my css file conflict with vuetify css.

Answers:

DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

This wording in the Deep Selectors page of the Vue docs sounds like it contradicts itself. But it’s saying, for instance, if you want to scope-style a ‘p’ element and have those changes show up in a v-html, your css should look like this.

>>> p {
/* some css */
}

###

You can you deep selectors to affect css of child component

AdminMain.vue (parent component)

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

will be translate to .a[data-v-f3f3eg9] .b { /* ... */ }

then .b will effect children component (AdminHome.vue)