Question

我有以下component.html：

<tr>
 <td>
   <span matTooltipClass="primary-tooltip" matTooltipPosition="above" matTooltipHideDelay="100000" matTooltip="{{cert.awsCertId}}"><p style="overflow:hidden;text-overflow: ellipsis;max-width:120px">{{cert.awsCertId}}</p></span>
  </td>
</tr>

在我的component.scss中：

.primary-tooltip {
  min-width: 300px;
  background-color: #FC5558;
}

根据docs，这应该在材质工具提示中添加自定义类，但我没有看到正在应用的样式。我弄错了吗？有没有其他方法可以将样式应用于工具提示？

Answer 1

将你的风格放在一个共同的样式表中

<强> Stackblitz Example

或在您的组件上将encapsulation设置为ViewEncapsulation.None：

@Component({
 selector: '...',
 template: '...',
 encapsulation: ViewEncapsulation.None,
 styles: [`
   .primary-tooltip {
      min-width: 300px;
      background-color: #FC5558;
   }
`]
})
export class Component {}

<强> Stackblitz example

Answer 2

您不能使用类direclty，因为它呈现为阴影dom。通过使用主机，您可以更改阴影dom的css

:host /deep/ .primary-tooltip {
 min-width: 300px;
  background-color: #FC5558;
}

Angular2 Material Tooltips - 未添加类

2 个答案: