使用vue深度选择器修改ElementUI组件内样式的示例代码
短信预约 -IT技能 免费直播动态提醒
例子：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官网找组件引用。
到此这篇关于使用vue深度选择器修改ElementUI组件内样式的文章就介绍到这了,更多相关vue修改ElementUI组件内样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
