我正在使用這樣的墊子圖示
HTML 代碼檔案 - dateentry.component.html
<mat-icon
matTooltip="Time limit exceeded for current sku"
matTooltipPosition="above"
matTooltipClass="delay-msg-tooltip">
info
</mat-icon>
我想更改懸停文本“當前 SKU 超出時間限制”的背景顏色和字體顏色，我試過這樣但沒有成功。
CSS 代碼檔案 dataentry-component.scss
.delay-msg-tooltip {
background-color: #FFFFFF!important;
color: #5F5F5F!important;
box-shadow: 0px 4px 23px #0000000d!important;
border-radius: 5px;
}
為了在瀏覽器中參考，mat-icon HTML 顯示如下
<mat-icon _ngcontent-nph-c79="" role="img" mattooltip="Time limit exceeded for current sku" mattooltipposition="above" mattooltipclass="delay-msg-tooltip" class="mat-icon notranslate mat-tooltip-trigger material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-0" cdk-describedby-host=""> info </mat-icon>
用于參考當前視圖的影像
想要的視圖
uj5u.com熱心網友回復：
你在哪里寫了 CSS .delay-msg-tooltip？
由于Angular View Encapsulation，您需要在您的styles.scss而不是組件的樣式中撰寫樣式
uj5u.com熱心網友回復：
根據材料圖示檔案
@Component({
selector: 'tooltip-custom-class-example',
templateUrl: 'tooltip-custom-class-example.html',
styleUrls: ['tooltip-custom-class-example.css'],
// Need to remove view encapsulation so that the custom tooltip style defined in
// `tooltip-custom-class-example.css` will not be scoped to this component's view.
encapsulation: ViewEncapsulation.None,
})
您要么必須設定ViewEncapsulation為，None以便將您在組件中應用的樣式應用到 matToolTip，因為 ToolTip 在技術上不在您的組件內。或者
您可以在 中添加樣式，styles.css以便全域應用它們。
我建議做后者。因為它使我免于更改組件的視圖封裝并保持封裝該組件的樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416448.html
標籤：