요소-UI의 지방 재정의 기본 스타일

프로젝트에서 발생하는 최근의 문제는, 전체에 영향을주지 않고, 페이지 안에 혼자 요소 - UI 스타일을 변경하려면

두 가지 방법이 있습니다 :

바로 자신이 요소를 사용할 검토, 클래스 브라우저 : [추가하지 마십시오 범위 중요한] 다음 약간 수 있습니다 클래스 스타일에 직접 액세스를 설정 1. 스타일 태그에 변경하려는 구성 요소를 추가합니다.

제안 : 추가 선택기 그렇지 않으면 약간 전역 스타일이되고, 스타일로 인수에 부모 레이어의 범위를 제한합니다.

<스타일> 
  .ruzhu-엉망 .el 형태-item__label { 
    글꼴 크기 : ! 16px 중요한 ; 
  } 
  .zhuanye-엉망 .el 형태-item__label, .zhuanye-엉망 .color-t { 
    글꼴 크기 : ! 16px 중요한 ; 
    색상 : # 606266 ; 
  } 
</ 스타일> 
<스타일 LANG = "SCS들"은 범위> 
 
  @import를 '../../../assets/scss/pages/organizationUserCenter1.scss'; 
 
</ 스타일>

2. 공기를 통해 >>> 범위와 적용 범위를 사용하여

당신은 부모의 선택으로 레이어를 추가 할 필요가

<스타일 범위> 
.charge-성공 >>> .el-dialog__body { 
    높이 : 85 % ; 
    패딩 : 5 % ; 
  } 
</ 스타일>

이 경우 학습에 대한 관심이의 원리를 설명하는 모습을 가질 수있다 :

범위의 역할 : 제어 CSS를이 구성 요소의 현재 스타일의 범위 내에, 다음의 원리는 무엇인가? ?

스코프의 원리

효과는 주로 PostCSS 변환함으로써 달성 속성 범위를 VUE

다음은 VUE 번역하기 전에 코드입니다 :

<스타일 범위> 
.EXAMPLE { 
  색상 : 빨강 ; 
} 
</ 스타일> 
 
<템플릿> 
  <DIV 클래스 = "예"> 안녕하세요 </ DIV> 
</ 템플릿>

번역 후 :

<스타일> 
.EXAMPLE [데이터 V-5558831a] { 
  색상 : 레드 ; 
} 
</ 스타일> 
 
<템플릿> 
  <DIV 클래스 = "예"데이터-V-5558831a> 안녕하세요 </ DIV> 
</ 템플릿>

즉 모든 성분 PostCSS는 DOM 고유 한 동적 특성, 그리고, 조립 DOM 속성 선택기이 선택된 대응 추가적인 CSS 선택기를 추가 가산이 방법은 상기 속성에만 작용하는 스타일을 만든다 DOM 내부의 dom-- 구성 요소.