1. Problem:
The project uses the pop-up windows and forms of elment ui. I want to customize the style. I originally used the ::v-deep style penetration and it took effect. However, in the project, there is a component that is displayed on every other page. Yes, the defined style affects all pages. But I don’t want to remove the scoped attribute to cause style coverage between components.
2. Solution:
add a class to the pop-up window and the outer layer of the form
to put the style in a public file and import it globally
<el-dialog
title=""
:visible.sync="centerDialogVisible"
center
width="33%"
class="dialog"
>
<el-form
class="dialog_form"
>
main.js
import "./css/comment.css"
Add .dialog in front of comment.css
to define only the style of the component in the pop-up window.
.dialog .el-dialog {
border: 1px solid #707070;
opacity: 1;
border-radius: 10px;
margin-top: 237px !important;
}