vue에서 상위 구성 요소를 통해 하위 구성 요소의 스타일을 수정하는 방법

이제 상위 구성 요소에서 Vue의 하위 구성 요소 스타일을 수정하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue를 사용한 개발에서는 UI 구성 요소(ElementUI, iview)를 포함한 외부 구성 요소를 참조하는 경우가 있습니다.

태그에 범위 지정 속성이 있는 경우 해당 CSS는 현재 구성 요소의 요소에만 적용됩니다.

그러나 상위 구성 요소에 범위를 추가한 후에는 상위 구성 요소의 스타일이 하위 구성 요소에 침투하지 않으므로 상위 구성 요소에 하위 구성 요소의 스타일을 작성해도 아무런 효과가 없습니다.

1. 범위를 제거합니다

상위 구성 요소의 에서 범위를 제거한 후 하위 구성 요소의 스타일을 상위 구성 요소에 작성할 수 있지만 이로 인해 전역 구성 요소가 오염될 것을 걱정하게 됩니다. 스타일.

【전역 스타일을 사용하는 올바른 방법은 전역 app.css를 사용하는 것임을 알고 있기 때문입니다】

2. 로컬 스타일과 전역 스타일을 혼합하세요

구성 요소 도메인에서 범위가 지정된 스타일과 범위가 지정되지 않은 스타일을 모두 사용할 수 있습니다. 스타일:

/* 全局样式 */ /* 本地样式 */ 로그인 후 복사 위 전역 스타일의 하위 구성 요소에서 수정해야 할 스타일을 작성했습니다

3. 딥 액션 선택기를 사용하세요

범위가 지정된 스타일의 선택기가 작동하려면 하위 구성 요소에 영향을 주는 등 "더 깊게" 연산자를 사용할 수 있습니다.

.a >>> .b { /* ... */ } 로그인 후 복사 SASS와 같은 일부 전처리기는 >>>를 올바르게 구문 분석할 수 없습니다. 이 경우 /deep/ 연산자를 대신 사용할 수 있습니다. 이는 >>>의 별칭이며 잘 작동합니다.

자, 주요 내용은 위 사항입니다.

추가해야 할 사항은 다음과 같습니다.

1. v-html을 통해 생성된 DOM 콘텐츠는 범위의 스타일에 영향을 받지 않지만 깊은 작업 선택기를 통해 스타일을 설정할 수 있습니다

2. CSS 범위는 클래스를 대체할 수 없습니다

3. 재귀 구성요소에서 하위 선택자를 신중하게 사용하세요.

위 내용은 제가 모든 사람을 위해 작성한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.