javascript - In the vue.js component development model, how to make the style only apply to this component and its subcomponents.

Question

If scoped is used, the style can only affect the current component but not its sub-components. Sometimes due to design problems, there are a lot of styles shared between different sub-components. I want to ask the master if the style can only be applied to This component and its subcomponents.

Answer 1

Don’t use scoped and take control of the css namespace yourself

You can name each component with a specific and unique class, and the CSS of the component is within the scope of this naming.

For example, header is a subcomponent of index

    .header-comp{
        h2{
            
        }
        .title{
        
        }
    }

    .index-view{
        .container{
        
        }
    }

Final rendering

    <p class="index-view">
        <p class="header-comp"></p>
    </p>

    .index-view{}
    .index-view xxx{}
    .header-comp{}
    .hader-comp .xxxx{}