Inherit CSS in Vue components

Question

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.

I had an answer for a similar question in stackoverflow.com/a/49654061/5599288 . Maybe it will be useful to you. — Jacob Goh
– Jacob Goh, Commented Jun 2, 2018 at 16:11
@JacobGoh Unfortunately in my case it not working. Imported code in SCSS is out of te selector body as new <style> tag — Adam Galiński
– Adam Galiński, Commented Jun 3, 2018 at 8:07

Evan Jones · Accepted Answer · 2019-05-22 23:13:15Z

2

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 */
}

answered May 22, 2019 at 23:13

Evan Jones

437 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ittus · Accepted Answer · 2018-06-02 13:11:54Z

0

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)

answered Jun 2, 2018 at 13:11

ittus

22.5k5 gold badges62 silver badges59 bronze badges

2 Comments

Adam Galiński Over a year ago

Ok, but i use bootstrap. In this case i must add ">>>" operator in the whole file?

ittus Over a year ago

With 3rd party css, you can import it in main.js or root component.

Collectives™ on Stack Overflow

Inherit CSS in Vue components

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related