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

elementui 自定义样式没生效相关推荐

Android自定义Button样式（自定义样式不生效怎么办）
在drawable目录下新建button_shape.xml自定义按钮样式文件 button_shap.xml <?xml version="1.0" encoding=&q ...
【已解决】ElementUI自定义样式生效过慢的问题
问题原来的:class生效需要反应一下(之前不会有这种情况),比如点击一下元素,然后CSS才会更新一下,然后尝试使用type类型来控制颜色,因为不论是type还是class,最后都是影响的class ...
uni-app开发微信小程序时u-view自定义样式不生效
背景: 在使用uni-app开发微信小程序时,设置原生样式后无效 test1.vue文件 <template><view><u-radio-group v-model=& ...
elementUI解决el-checkbox自定义样式、@change样式的失效等bug - 代码示例
elementUI解决el-checkbox样式(自定义样式问题) 1. 需求(如图所示): 2. 代码示例说明:(截图示下) 测试正常. /* 热门职位 + 区域组件替换样式 */ .hot-jo ...
html5自定义组件样式,Taro 自定义组件样式不生效及解决方案
一.问题页面功能太多,想分成多个自定义组件,结果发现自定义组件样式不生效. 二.解决办法(推荐第二种) 第一种:利用 externalClasses 定义段定义若干个外部样式类实现(不推荐,写法累赘 ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
elementUi自定义主题色（最简单优雅）
elementUi自定义主题色 Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量: 1.新建一个样 ...
android通知栏样式自定义,如何给状态栏上的时钟自定义样式或位置？(位置篇)
原标题:如何给状态栏上的时钟自定义样式或位置?(位置篇) 时间,是状态栏必不可少的空间之一.至于它的重要性和"电量"."信号"相比,哪个更重要.就由用户自行判断 ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...

elementui 自定义样式没生效

elementui 自定义样式没生效

方案一需要中间加一个/deep/使样式生效

方案二去掉style标签上的scoped，这种方式能达到效果但不建议使用！

elementui 自定义样式没生效相关推荐

最新文章

热门文章

elementui 自定义样式没生效

elementui 自定义样式没生效

方案一 需要中间加一个/deep/使样式生效

方案二 去掉style标签上的scoped，这种方式能达到效果但不建议使用！

elementui 自定义样式没生效相关推荐

最新文章

热门文章

方案一需要中间加一个/deep/使样式生效

方案二去掉style标签上的scoped，这种方式能达到效果但不建议使用！