Scoped is a pitfall after vue uses elementUI

When the style of elementUI component needs to be changed, the style will be redefined in style
In order to avoid polluting the external style, I added the scoped tag, but found that after adding the scoped tag The styles of all el-dialog sub-tags are invalid.
After some googling, I found the reason. The scoped tag adds a unique dynamic attribute to all dom in a component and adds a corresponding attribute selector to the css selector. Select the DOM in the component. This approach makes the style only apply to the DOM element containing the attribute (the DOM inside the component).

Since the attribute selector is added, the redefined subcomponent style does not overwrite the original style and becomes invalid.

solution

1. Write an unscoped style tag, put the third-party component style into this tag, add its own class name to the component used, and define the style of the sub-component in a tree structure in the style, so that the style of the sub-component will be It is limited to the class name defined by ourselves to avoid polluting the outside.
2. Use /deep/ style penetration