web-dev-qa-db-ja.com

matTooltipClassがCSSを適用しない

angular material 2からmat-tooltipにcssの変更を適用しようとしています。ドキュメントにmatTooltipClassがあり、cssファイルで選択して作成できます。変更しましたが、動作させることができません。

component.html：

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss：

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}
cssangularangular-material2
12
Brian Stanley

::ng-deepを使用して、マテリアル要素のデフォルトのCSSを上書きする必要があります。

::ng-deep .tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}
17
bugs

上記で述べたことに加えて、私のために働いた2つの方法があります：-Component.scssで：

::ng-deep mat-tooltip-component{
    & .mat-tooltip{
        color: green; // your custom properties here.
    }
}

-グローバル：

.mat-tooltip{ // making the font size on the mat-tooltip 1.5rem globally
    font-size: 1.5rem;
    &.exaggerated-tooltip{  // to modify the tooltip create a class like this
        font-size: 2.5rem;  // and use it like this: *matTooltipClass="exaggerated-tooltip"* in the
        color: red;         // component in which you are putting the tooltip
    }
}
2
daddyschmack

Angularマテリアルのドキュメントによると、matTooltipClassはngClassと同じ構文をサポートしています。したがって、[matTooltipclass] = "'tooltip'"を試すことができます

<mat-cell 
   *matCellDef="let productInfo" 
   matTooltip="{{productInfo.description}}"
   [matTooltipclass]="'tooltip'">
   {{ productInfo.description}}
 </mat-cell>
2
Maolin

ブログ投稿 でSideriteという紳士が私に有効な答えを提供してくれました。私は彼の投稿の最も関連性の高い部分から言い換えて、上記の質問で説明されているmatTooltipClass = "tooltip"シナリオを使用しています。

[.tooltipクラスの定義]はグローバルCSSファイルにある（すべてに適用される）か、コンポーネントでカプセル化ViewEncapsulation.Noneを宣言する必要があります。 [.tooltipクラス定義がグローバルCSSファイルにある場合]、クラスの宣言が十分具体的であることを確認します。これを試してください：mat-tooltip-component .mat-tooltip.tooltip {...}。

私の場合、グローバルstyles.scssファイルで.tooltipクラスを定義しており、Sideriteの提案に従って次のように定義するまで機能しませんでした。

mat-tooltip-component .mat-tooltip.tooltip {
    color: blue !important;
}

このアプローチは、受け入れられた回答で提案されているように:: ng-deepの使用を回避します。 Angularドキュメントには、アプローチが deprecated であると記載されています。！スタイル。

0
StackOverflowUser