mdToolTip的自定义样式 [英] Custom Styling of mdToolTip

问题描述

我在Angular项目中有以下代码

I have the following code in an Angular project

 <input class="form-control" type="number" [(ngModel)]="cons.failPercent" [ngModelOptions]="{standalone: true}"
                         mdTooltip="Typically valves can be repaired three times before they need to be replaced"
                         mdTooltipPosition="right"
                         autofocus/>

我的组件中有

    @Component({
  templateUrl: './ownership-form.component.html',
  styleUrls: ['./ownership-form.component.css'],
  encapsulation: ViewEncapsulation.None
})

在我的CSS中，我有

.md-tooltip{
  color:yellow !important;
  height:auto;
}

但是它似乎没有使工具提示样式化.我该如何解决?

But it does not appear to be styling the tooltip. How can I fix this?

推荐答案

根据您的Angular版本，您需要使用/deep/或 :: ng-deep 组合选择器来规避封装.或者，在全局样式表(通常为styles.scss)上设置样式.

Depending on your Angular version you'll need to use the /deep/ or ::ng-deep combination selectors to circumvent encapsulation. Alternatively, set the styling on your global stylesheet (commonly styles.scss).

角度2:

/deep/ .md-tooltip { ... }

Angular 4.3+:

Angular 4.3+:

::ng-deep .md-tooltip { ... }

在Hackernoon获得更多信息

这篇关于mdToolTip的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！