사용자 정의 Angular Material UI CSS 스타일

Question

<p>저는 Mat-grid-tile 태그를 사용하고 있는데 그것이 CSS 클래스를 사용한다는 것을 깨달았습니다. 아래에 복사하여 붙여넣은 Mat-grid-tile -content입니다.
<br /><br />브라우저의 개발 도구에서 align-items: center; 속성을 비활성화하거나 아래 CSS에서 align-items: flex-start로 변경하면 완벽하게 작동합니다. (위에서 아래로). <br /><br />제 질문은 이 특정 속성을 어떻게 재정의할 수 있습니까? 검색 결과 인라인 CSS를 사용하면 작동하지 않으며 ng::deep은 좋은 습관이 아니라는 것을 알게 되었습니다. 데이터가 하향식 방식으로 표시되도록 이를 재정의할 수 있는 방법을 이해하도록 도와주세요. 다른 해결 방법이 있으면 알려주시기 바랍니다. <br /><br />분명히 Chat은 이에 대해 신경 쓰지 않습니다.

<pre class="brush:php;toolbar:false;">.mat-grid-tile-content { 상단: 0; 왼쪽: 0; 오른쪽: 0; 하단: 0; 위치: 절대; 디스플레이: 플렉스; 항목 정렬: 중앙; 내용 정당화: 센터; 높이: 100%; 패딩: 0; 여백: 0; }</pre> <p>초보자님 조언 부탁드립니다</p>

Answer 1

안타깝게도 Angular Material의 CSS를 변경하는 것은 캡슐화로 인해 간단하지 않습니다. 자세한 내용은 다음 링크를 참조하세요: https://material.angular.io/guide/customizing-comComponent-styles.

Angular 머티리얼 스타일은 디자인을 쉽게 변경할 수 없으므로 수정하는 권장 방법이 없습니다. 그러나 계속 진행하려면 세 가지 방법이 있습니다.

캡슐화 비활성화: 캡슐화를 비활성화하면 템플릿에 있는 다른 구성 요소의 하위 요소를 포함하여 구성 요소의 모든 CSS 스타일에 영향을 줍니다. 여기에서 자세한 내용을 알아볼 수 있습니다: https://angular.io/guide/view-encapsulation.

Angular 프로젝트의 루트 디렉터리에 있는 style.css 파일에서 .mat-grid-tile-content 클래스를 재정의하세요. 모든 CSS 스타일은 프로젝트의 모든 HTML 템플릿에 적용됩니다. 변경 사항이 적용되지 않으면 속성 끝에 !important 키워드를 사용해 보세요.

::ng-deep 사용(사용되지 않음): ::ng-deep은 더 이상 사용되지 않지만 완벽한 대안이 없기 때문에 일부 개발자는 여전히 이를 선호합니다. 하지만 지원 중단으로 인해 향후 문제가 발생할 수 있으므로 주의하세요.

요약하자면, Angular 머티리얼 스타일을 수정하는 것은 권장되지 않지만 그렇게 하기로 선택한 경우 각 접근 방식의 잠재적인 결과를 고려하세요.