matTooltip에 사용자 정의 스타일 추가

나는 최근에 이 요구를 만났다. matTooltip을 꾸준히 디자인한 후에 마침내 해냈다. 그리고 여기서 내가 배운 것을 공유하는 것이 좋은 생각이라고 생각했다.
[각도 재료] 툴팁의 구조를 보는 것은 매우 어렵습니다. 체크를 시도할 때 매우 복잡하기 때문에 HTML을 먼저 공유하겠습니다.

<div class="cdk-overlay-container">
     <div class="cdk-overlay-connected-position-bounding-box" dir="ltr"style="top: 0px; left: 0px; height: 100%; width: 100%;">
      <div id="cdk-overlay-1" class="cdk-overlay-pane mat-tooltip-panel"style="pointer-events: auto; top: 8px; left: 417.625px;">
      <mat-tooltip-component aria-hidden="true" class="ng-tns-c34-15 ng-star-inserted" style="zoom: 1;">
          <div class="mat-tooltip ng-trigger ng-trigger-                state"style="transform-origin: left center; transform: scale(1);">Info about the action</div>
      </mat-tooltip-component>
     </div>
    </div>
</div>

HTML의 구조를 똑똑히 볼 수 있을 때 문제가 절반으로 해결되었다. 다음에 우리는 HTML의 스타일을 설계해 보려고 한다.반드시 이런 스타일들을 당신의 맞춤형 믹스 속에 두어야 한다.SCS 또는 스타일.scss

.cdk-overlay-pane {  
 &.mat-tooltip-panel {  
  .mat-tooltip { 
  color: pink;
  background-color: white;
  border:  1px solid #eeeeee;
  border-radius:  3px;
  font-size:  15px;
  padding:  10px; 
  } 
 } 
}

이렇게이제 툴팁의 스타일을 설정하는 방법을 알 수 있습니다.
감사합니다!