Resuelva el problema del estilo de modificación personalizada de element-ui

Use element-ui, si desea modificar el estilo original de el-table

1. Puede personalizar la clase para no afectar el estilo global

<div class="liquidataCase border-padding bg-shadow">
    <el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight"> 
    ......
    </el-table>
</div>

Sin ámbito en el estilo css

<style lang="scss">
$wxcolor:#e4c21b;
.wxcolor{color:$wxcolor};
.liquidataCase .el-table tr td:nth-child(3) .cell{
  text-align: center;
  i{
    &:hover{
      cursor: pointer;
    }
  }
}
.liquidataCase .el-select__tags{
  flex-wrap: initial !important;
}
</style>

2. Si desea agregar alcance al estilo CSS, tendrá efecto si usa / deep /

<style lang="scss" scoped>
$wxcolor:#e4c21b;
.wxcolor{color:$wxcolor};
/deep/.liquidataCase .el-table tr td:nth-child(3) .cell{
  text-align: center;
  i{
    &:hover{
      cursor: pointer;
    }
  }
}
/deep/.liquidataCase .el-select__tags{
  flex-wrap: initial !important;
}
</style>

Los componentes no afectarán

Supongo que te gusta

Origin blog.csdn.net/SmartJunTao/article/details/108580164
Recomendado
Clasificación