Question

我在角度4组件中有一个简单的ngBootstrap工具提示，我试图设计风格。根据其他SO问题，这应该有效：

.tooltip-inner {
    background-color: #00acd6 !important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    color: #fff;
}

但没有效果。我确认工具提示内部类在工具提示中使用但是没有应用

Answer 1

This Plunker显示了如何设置ng-bootstrap工具提示的样式。关键是使用/deep/或::ng-deep **强制样式进入子组件：

::ng-deep .tooltip-inner {
    background-color: #00acd6;
    color: #fff;
}

默认情况下，Angular使用模拟view encapsulation，这意味着除非您告诉他们（例如使用::ng-deep），否则样式不会从父组件传播到子组件。

** /deep/为deprecated in Angular 4.3.0，::ng-deep现在是首选，但根据该链接，将来也会弃用

Answer 2

I guess that didn't work for you cause you didn't try it on your main style.scss file, (or any other .scss file you load globally via the "styles":[] at angular-cli.json). on the component.scss level it won't work.

I just used:

.tooltip-inner {
  opacity: 0.8 !important;
}

I think going for: /deep/ isn't a good practice.

样式ngBootstrap工具提示

2 个答案: