修改ElementUI组件默认样式

1.新建全局样式表

  在src/styles目录下新建一个element-reset.scss,根据需要修改原有class名称，覆盖原本样式

  main.js中全局样式引入

  import './src/styles/element-reset.scss'

2.！important属性强制修改

.el-dialog .el-dialog__header {
  text-align: center ！important;
}

3.使用/deep/深度修改

  找到需要修改的 ElementUI 标签的类名，然后在类名前加上/deep/，可以强制修改默认样式。这种方式可以直接用到有scoped属性的 style 标签中。

::v-deep .el-dialog .el-dialog__header {
  text-align: center;
}

  备注：在vue3中使用/deep/会报错，对于使用css预处理器（scss、sass、less）时，深度选择器更推荐使用::v-deep

  缺点：样式需逐行修改