关于vue中,修改element样式不生效的问题(父组件添加scoped之后。解决在父组件中无法修改子组件样式问题)

关于vue中,修改element样式不生效的问题(父组件添加scoped之后。解决在父组件中无法修改子组件样式问题),第1张

在项目中,我们经常用到element,有时候我们需要对原生的element进行修改,但是有时候element组件经常会有子元素的形式呈现。
比如在dom上就是这个样子。

在这种情况下,如果我们需要修改input的样式,就需要用子代选择器使用,比如 .theday .el-input__inner{,但是我们总是失败,我们发现我们的修改css以后input并没有相关的样式出现
出现这样的情况是因为父组件的 scoped 样式不能穿透到子组件上

<style lang="scss" scoped>

要想子代选择器生效,就必须要删掉scoped这个词,但是问题是这样会造成css全局污染,这样的方法不可取。
使用 /deep/ 或者 >>> 解决

.child /deep/ span {
*some prop
}

或者

.child >>> span {
*some prop
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322004.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存