Question

我在Angular项目中有以下代码

 <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;
}

但它似乎没有为工具提示造型。我该如何解决这个问题？

Answer 1

根据您的Angular版本，您需要使用/deep/或::ng-deep combination selectors来规避封装。或者，在全局样式表上设置样式（通常为styles.scss）。

Angular 2：

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

Angular 4.3+：

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

More info at Hackernoon

Answer 2

我个人会将你的风格范围扩展到相关组件。

Angular＆lt; V4.2

:host /deep/ {
  .md-tooltip { ... }
}

:host >>> {
  .md-tooltip { ... }
}

Angular＆gt; = v4.2

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

如果从组件中删除封装。风格应该仍然有效。通过在::ng-deep中添加:host(..)，它将模拟全局css。但只是在向下刺穿的方向。

Angular正在尝试推广组件级样式。我会避免将代码移动到全局样式表。如果您访问的路线不需要有问题的组件，那么您无缘无故地实例化（加载代码）。

mdToolTip的自定义样式

2 个答案: