修改ELement中默认的class样式
情景bug:在隐私合规项目vue+ts+elementUI+less中,左侧图片,右侧文字(具有padding-left),文字会挤开图片,在同一行上,图片右侧被空白覆盖。猜测:文字过长导致。解决:限制文字长度。尝试:在<style lang="scss" scoped>中修改无效。然后进行全局覆盖吧。<style>.logo-row-right {...
·
情景bug:在YSHG项目vue+ts+elementUI+less中,左侧图片,右侧文字(具有padding-left),文字会挤开图片,在同一行上,图片右侧被空白覆盖。
猜测:文字过长导致。
解决:限制文字长度。
尝试:在<style lang="scss" scoped>中修改无效。然后进行全局覆盖吧。
<style>
.logo-row-right {
width: 200px;
}
</style>
-----------
新学到一个东西,不需要覆盖全局样式。
可以进行deep样式穿透。特别简单,只需要加 /deep/ 就行了
/deep/ .el-table th,
.el-table td {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #5e5e5e;
}
deep vue 官网:Deep Selectors
深度选择器
如果您希望scoped样式选择器是“较深的”,即影响子组件,则可以使用>>>组合器:
<style scoped>
.a >>> .b { /* ... */ }
</style>
上面将被编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
一些预处理器(例如Sass)可能无法>>>正确解析。在这些情况下,您可以改用/deep/或::v-deep组合器-两者都是它们的别名,>>>并且工作原理完全相同。
更多推荐
已为社区贡献8条内容
所有评论(0)