使用vue深度选择器修改ElementUI组件内样式的示例代码

例子：el-collapse标签修改子组件样式

在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

<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使用：

<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>

注意：在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep

<-- 放上去就行了 -->
　　　　<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>

 注：el-collapse-item__header等类名在浏览器开发者工具中的Elements找到

vue使用element ui

第一步：

npm install element-ui --save

第二步：

主要代码（安装完成后在 main.js 添加全局引用）：

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

Vue.use(ElementUI);

第三步：

element ui官网找组件引用。