mint-ui修改局部样式的方法

最新推荐文章于 2024-05-16 18:21:23 发布

转载最新推荐文章于 2024-05-16 18:21:23 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/693040

文章标签：

#ui #javascript #ViewUI

本文探讨了在Vue项目中使用Mint UI组件库时遇到的样式覆盖难题，详细介绍了如何利用>>>或/deep/选择器解决作用域CSS的问题，确保局部样式能够正确覆盖全局样式。

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

由于VUE的<style scoped>作用域问题,针对mint的组件样式所做的修改,都不生效,但如果不加,那么又会覆盖缺省的全局样式,经过多方查找,终于找到了这篇文章《Vue中的作用域CSS和CSS模块的差异》,其中提到的>>>连接符或/deep/,很好的解决了我的问题.

比如:

<div class="content">
      <mt-field label="团队名称" v-model="teamName" @blur.native.capture="changeStatus"></mt-field>
      <mt-field label="团队愿景" type="textarea" rows="4" v-model="teamDesc" @blur.native.capture="changeStatus"></mt-field>
</div>

缺省的input是没有边框的,也就是border: 0;

如果这么设置:

<style scoped>
  .content {
    margin-top: 40px;
  }

  .content input {
    border: 1px solid grey;
  }

  .mint-field-core {
    border: 1px solid grey;
  }
</style>

那是没有效果的,但使用>>>或者是/deep/,就有效果了.

<style scoped>
  .content {
    margin-top: 40px;
  }

  .content >>> input {
    border: 1px solid grey;
  }

  .content /deep/ textarea {
    border: 1px solid grey;
  }
</style>