mint ui组件内重置默认样式

最新推荐文章于 2023-08-23 11:34:47 发布

Lofan.

最新推荐文章于 2023-08-23 11:34:47 发布

阅读量760

点赞数

分类专栏： Vue 专栏文章标签： mint ui mint ui重置默认样式 mint-ui重置默认样式 mint-ui less重置默认样式 mint-ui css重置默认样式

本文链接：https://blog.csdn.net/u011019468/article/details/93327179

版权

Vue 专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Less跟CSS的编写不一样哦要注意

用Less的方式写，要用 /deep/ 修饰符

比如，现在用 less 改 mt-header 组件的默认样式：

<style lang="less" scoped>
  .mint-header {
    padding: 0 15px;
    height: 44px;
    line-height: 44px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 100;
    
    & /deep/ .mint-header-title {
      font-size: 18px;
      color: rgba(26, 31, 36, 1);
    }
}
</style>

but， /deep/ 修饰符已经废弃了，虽然本地运行正常，但放到测试或者正式环境就会无效。

替代方案就是 —— 用CSS的方式代替Less方式，且使用 >>> 修饰符，具体如下：

<style scoped>
  .mint-header,
  .mint-header.is-fixed {
    padding: 0 15px;
    height: 44px;
    line-height: 44px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 100;
  }

  .mint-header>>>.mint-header-title {
    font-size: 18px;
    color: rgba(26, 31, 36, 1);
  }
</style>