How does El-Popover modify the style?

El-popover is one of the most common components used in Elder-UI, but the style and usage of the official elder-UI document are limited and require modification

But the problem came, today my colleague was changing it and suddenly found that the added cascading style did not take effect, only the added inline style could take effect, shouldn’t it? ! And look at the DOM structure is even more amazing

The div generated by el-Popover is not in the current component. It is not even in the div of the app. vue component, which is level with the div of the app. vue component

Hence baidu once discovery

Because el-popover and app. vue components are div level, we need to set the global style. In the tag, no scoped is the global style

Then, because el-Popover is a separate div, do not add styles to nesting, and do not use the penetrator >>> because el-Popover is not in the current component

<style lang="scss">
.el-popover {
    XXXXX
}

.class1 {
    .class2 {
        .class3 {
            XXXX
        }
    }
}
</style>
Copy the code

If you don’t want to write all styles as global styles, you can also write two styles like this

<style lang="scss">
.class1 {
    .class2 {
        .class3 {
            XXXX
        }
    }
}
</style>

<style lang="scss" scoped>
.el-popover {
    XXXXX
}
</style>
Copy the code

Although it is a small knowledge point, but it feels very useful

I hope to learn from each other and improve each other