elementui 自定义样式没生效

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/使其能作用到子组件中