부분 덮어쓰기 요소 ui의 기본 스타일

최근 프로젝트에서 발생한 문제는 한 페이지에서 요소-ui의 스타일을 단독으로 변경하고 전역에 영향을 주지 않으려는 것입니다
다음과 같은 두 가지 방법이 있습니다.
스타일 태그 추가
변경이 필요한 구성 요소에 스타일 탭을 추가합니다. [중점: scoped를 추가하지 마십시오.] 그리고class 설정 스타일을 직접 가져오면 됩니다. class는 브라우저에서 오른쪽 단추를 누르면 요소를 심사할 수 있습니다.
권장: 가져온 스타일에 범위를 제한할 수 있는 부모 선택기를 추가하면 전체 스타일이 됩니다.

 
scoped와 >>>을 사용하여 관통 커버
마찬가지로 부모 선택기를 추가해야 합니다

 
만약 또 흥미 있는 학습이 있다면 원리 설명을 볼 수 있다.
scoped작용: 스타일 내 css를 제어하는 작용역이 바로 현재 이 구성 요소입니다. 그러면 그 원리는 무엇입니까?
scoped의 실현 원리
vue의 scoped 속성의 효과는 주로 PostCSS 번역을 통해 이루어집니다.
다음은 번역 전의 vu 코드입니다

 
전역 후

 
즉, PostCSS는 하나의 구성 요소에 있는dom에 유일무이한 동적 속성을 추가한 다음에 CSS 선택기에 대응하는 속성 선택기를 추가해서 이 구성 요소에 있는dom를 선택합니다. 이런 방법으로 스타일은 이 속성을 포함하는dom - 구성 요소 내부dom에만 적용됩니다.
 
참조:https://www.cnblogs.com/zouwangblog/p/11141082.html