elementui 自定义样式没生效
例如有一个tab
<el-aside width="320px" class="meeting-setting-tabs">
<el-tabs type="card" class="lz-padding-top-20">
<el-tab-pane label="当前元素">用户管理</el-tab-pane>
<el-tab-pane label="当前元素">用户管理</el-tab-pane>
</el-tabs>
</el-aside>
没有加入自定义样式是这样的
加入自定义样式是这样的
通过谷歌浏览器的开发者工具,发现在html中前面的el-tabs
标签解析成了这个,需要修改的是子元素类名是el-tabs__header
、el-tabs__nav
等
如果之间通过css的选择器选择子元素则不能作用到子内部的元素 下面是错误的写法:
.meeting-setting-tabs .el-tabs__header {
}
.meeting-setting-tabs .el-tabs__nav {
}
.meeting-setting-tabs .el-tabs__nav-scroll {
}
方案一 需要中间加一个/deep/使样式生效
.meeting-setting-tabs /deep/ .el-tabs__header {
}
.meeting-setting-tabs /deep/ .el-tabs__nav {
}
.meeting-setting-tabs /deep/ .el-tabs__nav-scroll {
}
方案二 去掉style标签上的scoped,这种方式能达到效果但不建议使用!
总的来说之所以不能生效就是这个scope导致作用范围不能作用到内部的子组件,解决问题的最后方法是通过加/deep/使其能作用到子组件中