1、问题:
项目用了elment ui 的弹窗、表单,想要自定义样式,本来用的是::v-deep样式穿透,生效了,但是在项目中,有个组件是其他各个页面都有的,导致定义的样式影响了所有页面。但又不想去除scoped属性造成组件之间的样式覆盖
2、解决:
在弹窗、表单外层加个class
将样式放在公共文件中,由全局引入
<el-dialog
title=""
:visible.sync="centerDialogVisible"
center
width="33%"
class="dialog"
>
<el-form
class="dialog_form"
>
main.js
import "./css/comment.css"
comment.css
在前面加上.dialog 就能只定义到该弹窗里组件的样式
.dialog .el-dialog {
border: 1px solid #707070;
opacity: 1;
border-radius: 10px;
margin-top: 237px !important;
}