Turn on the scoped attribute for the

In projects, we often bring in external UI components (elementUI, mint-UI), but by adding the scoped attribute to the parent component, the parent component’s style will not penetrate into the child component, so writing the child component’s style in the parent component will have no effect.

There are several ways to modify child component styles:

1. Remove the scoped

After scoped is removed from the parent component

2. Mix local and global styles

You can use both scoped and unscoped styles in a component:

<style lang="sass" scoped>
/* Local style */
</style>
<style lang="sass">
/* Global style * Modify the child component style, preferably nested outside the child component a class */
</style>
Copy the code

3. Deep selector

If you want one of the selectors in the scoped style to go “deeper”, such as affecting child components, you can use the >>> operator:

<template>
  <div id="app">
    <my-header></my-header>
  </div>
</template>

<style scoped>
  .myHeader >>> .title {
    color: red;
  }
</style>
Copy the code
<div class="myHeader">
  <div class="title"></div>
</div>
Copy the code

Some preprocessors like SASS don’t parse >>> correctly. In this case you can use the /deep/ operator instead – this is a >>> alias that will work just as well.

<style scoped>.myHeader /deep/ .title { color: red; }</style>
Copy the code

This way of writing and changing the styles of child components does not pollute the global style!

Note: DOM content created using V-HTML is not affected by scoped styles, but you can still style them using the depth selector