修改标签官网自带css——dialog

对于标签原本自带的 class 类

• 就如下图的 .el-dialog__body 就是自带的

• 原 dialog：

  

  • 现在若要更改 padding 值

  • 方式一（但是修改的是全局的了）：

    <style>
    .el-dialog__body {
      padding: 15px;
    }
    </style>
    

  • 方式二（给 dialog 加一个自定义类名，修改的是所有 class 匹配的 el-dialog）：

    <el-dialog ...... custom-class="dialog-edit">
    
    <style>
    .dialog-edit .el-dialog__body {
      padding-bottom: 0
    }
    </style>
    

    • 这里注意 dialog 有些特殊，2.4.0 前的都要用 custom-class 自定义类，之后就被移除使用，使用 class 即可

    • 就例如这里，显示了才是使用了这个类，否则就是没渲染进来，没作用：

      

  • 总之写在 <style scope> 里就是不好使，我也不太会，!important 和 ::v-deep（/deep/） 都用上了，难道是我用法有问题？望网友指点迷津

• 想着能不能在调用这个弹窗所在子组件的父组件里加呢？如：

  .xxx-content-container .dialog-edit .el-dialog__body {
    padding-bottom: 0;
  }
  

  • 自行尝试不太行，望网友们指点迷津