기술나눔

[WeChat Mini 프로그램 지식포인트] 커스텀 컴포넌트-확장-외부 스타일 클래스

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

컴포넌트를 사용할 때 컴포넌트 사용자는 CSS 클래스 이름을 컴포넌트에 전달하고 전달된 클래스 이름을 통해 컴포넌트의 스타일을 수정할 수 있습니다.

외부 스타일 클래스를 사용하여 구성 요소의 스타일을 수정해야 하는 경우 externalClassess를 사용하여 구성 요소에 여러 외부 스타일 클래스를 정의해야 합니다.

구체적인 사용법은 다음과 같습니다.

(1) 구성 요소 파일에 custom06 구성 요소를 만듭니다.

(2) app.json의 "usinfComponents" 구성 항목에 custom06 컴포넌트를 등록합니다.

 

(3) custom06.js에 externalClassess를 추가하여 외부 스타일 클래스를 정의합니다.

 

(4) custom06.wxml에서 이 스타일 클래스를 사용합니다.

(5) cart.wxml 페이지의 스타일 클래스를 통해 클래스 이름을 바인딩합니다.

(7) cart.scss의 클래스 이름을 통해 스타일을 설정합니다.

(8) 표시 스타일은 다음과 같습니다

 

(9) 참고 사항:

참고: 동일한 노드에 외부 스타일 클래스와 일반 스타일 클래스가 있는 경우 다음과 같습니다.

두 클래스의 우선순위는 정의되어 있지 않습니다.

 

 

제안: 외부 스타일 클래스를 사용할 때 스타일은 !important를 통해 가중치를 추가해야 합니다.