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
缺点:样式需逐行修改
推荐文章
发表评论