修改elementUi默认样式不影响全局样式

dchhey

于 2019-06-19 22:27:53 发布

阅读量4.4k

点赞数

分类专栏： vue使用过程中遇到问题文章标签： scoped vue 深度作用选择器

本文链接：https://blog.youkuaiyun.com/weixin_39950595/article/details/92849667

版权

vue使用过程中遇到问题专栏收录该内容

4 篇文章

订阅专栏

博客介绍了Vue scoped深度作用选择器，若希望选择器作用更深、影响子组件，可使用 >>> 操作符，sass和less无法解析时可用 /deep/ 替换。此外，还提到不太推荐的方法，即定义不含scoped属性的style标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue scoped 深度作用选择器

希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符：

.userInfo >>> .el-form-item__label
        font-size: $font-size-medium
        color: $color-mainFont
        font-weight: 500
        margin-bottom: 20px
        padding: 0

sass和less无法正确解析>>>,可以使用/deep/ 替换，同样可以有作用

<style lang="less" scoped>
.searchforminline-out {
/deep/ input{
width: 50px;
}
</style>

2.不太推荐的一种方法

定义一个含有scoped属性的style标签之外，再定义一个不含有scoped属性的style标签（个人建议使用第一种方法）

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>