Angular 머티리얼 구성요소 테마 지정 - 소개

이 시리즈에서는 Angular Material 테마, 특히 구성 요소(일반적으로 가장 짜증나는 부분) 및 Angular Material Way 💅를 사용하여 자신의 구성 요소를 사용자 지정하는 방법에 대해 설명합니다. 이 시리즈가 새로운 개발자나 어려움을 겪고 있는 모든 사람이 주제에 대한 더 나은 이해와 관점을 얻는 데 도움이 되기를 바랍니다.

내가 왜 이 시리즈를 하고 있지?

나는 오랫동안 Angular Material을 사용해 왔으며 Angular 재료 구성 요소를 약간 조정해야 할 때마다 과거에는 일반적으로 sass 변수를 사용자 지정하고 구성 요소를 생성하는 대신 스타일 시트에서 CSS 속성을 재정의했습니다(대부분). 우리가 사용할 수 있는 sass 믹스인(저는 얼마 전에 중단했습니다 😉 )을 사용하여 보다 체계적이고 권장되며 확장 가능한 방법을 갖도록 설계합니다.

다음은 관련된 간단한 예입니다.


mat-paginator component 의 글꼴 크기를 늘리고 싶다고 가정해 보겠습니다. 위 그림의 빨간색 테두리에서 볼 수 있듯이 글꼴 크기를 늘리는 2가지 방법이 있습니다.

ㅏ. 특정 요소의 css 속성을 직접 변경:

.mat-paginator { font-size: 30px }
/* you might need to add !Important /*
/* depending on where you add this css or the ViewEncapsulation method you use.*/

비. Angular Material에서 제공하는 Sass 맵 업데이트:

이것은 $caption라는 타이포그래피 변수를 정의한 다음 angular-material-typography에 전달하는 긴(정확한) 방법입니다. 이 변수는 its sass definitions의 구성 요소에서 사용되며 mat-core() ) 믹싱, sass-map에 정의된 올바른 변수를 사용하고 마지막으로 mat-light or mat-dark 테마 믹스에 모든 것을 전달합니다(현재 단계의 순서는 무시). 이 과정은 이미 font-size를 변경하는 것만으로도 조금 복잡해 보이지만 일단 과정을 이해하면 나머지는 매우 쉬워집니다.

/* not complete example, we will visit it example in full detail in the series later */
...

$custom-theme: mat-typography-config(
  $caption: mat-typography-level(14px, 16px, 400),
);
@include angular-material-typography($custom-theme);

....

첫 번째 방법이 더 쉽지만 원하는 디자인을 사용자 정의하기 위해 많은 핵을 사용하게 되므로 이러한 값을 직접 변경하는 것은 권장되지 않습니다. 그리고 다른 재료 구성 요소를 사용하려는 경우(실제로 사용하게 될 것임), 적절한 코드베이스가 있는 경우 신입 및 다른 팀원이 이해하기 어려울 것입니다.

또한 현재guidelines available on the Angular Material website는 충분히 명확하지 않거나 충분히 상세하지 않으며 대부분의 StackOverflow 게시물은 !important most of the time을 사용하여 디자인을 수정하기 위해 더티 해킹을 사용합니다.

따라서 누군가가 프로젝트를 시작하는 경우 확장 가능하고 유지 관리가 쉬운 방식(일명 Angular Way 😌)으로 진행하는 것이 좋습니다.

이 시리즈의 다음 기사를 팔로우하세요. 따라서 Angular Material 구성 요소로 어려움을 겪었다면 의견을 말하고 직면한 문제를 공유하십시오.

다음 글에서 뵙겠습니다.