覆盖element-ui原生样式

Posted 2023-03-14 贺可英

使用深度选择器 /deep/进行作用域穿透，不需要去掉style 标签 scoped 属性。只需要在父类class下的element-ui组件class前加上/deep/，就可以修改默认样式

如下所示 改变原生el-button样式效果图如下：

 

下面是css代码

.bottom-box

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 13px;

    /deep/ .el-button

      width:50px;

      height:24px!important;

      background:#447aff;

      border-radius:6px;

      color:#ffffff;

      font-size:14px!important;

      font-family:Microsoft YaHei!important;

      display: flex;

      justify-content: center;

      align-items: center;

   

    .span

      display: inline-block;

      position: relative;

      top: 0px;

      left: -7px;