Sample code for modifying styles within ElementUI components using vue depth selector

Example: el-collapse tag modify subcomponent style

When writing styles in styles with scoped attributes, the styles in the subcomponent cannot be affected. At this time, we will use the deep depth selector to solve this problem. We are using the less preprocessor, which can be used normally, but an error will be reported in the scss preprocessor.

<style lang="scss" scoped>
.collapse1 {
  /deep/ .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  /deep/ .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

Scss uses:

<style lang="scss" scoped>
.collapse1 {
  ::v-deep .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  ::v-deep .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

Note: In vue, >>> is a depth selector, which can be used in the styles in the subcomponent. /deep/ and ::v-deep are both alias of >>>. /deep/ is not recognized in scss, and ::v-deep can be used.

<-- Just put it on -->
<el-collapse class="collapse1" v-model="...">
          <el-collapse-item v-for="(item,index) in ..." :name="index">
            <template slot="title">
              {{ item.... }}{{ index }}
            </template>
          </el-collapse-item>
        </el-collapse>

Note: Class names such as el-collapse-item__header are found in Elements in the browser developer tools

vue uses element ui

first step:

npm install element-ui --save

Step 2:

Main code (add global reference after installation):

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/";

(ElementUI);

Step 3:

element ui official website find component references.

This is the article about using the vue depth selector to modify the styles in the ElementUI component. For more related contents of vue to modify the styles in the ElementUI component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!