css - 替代/深/

Question

我想更改 ng bootstrap 分页组件的样式并在 Angular 6 应用程序中使用 /deep/ 链接。以下代码工作正常，但控制台显示警告，指出该代码已被弃用。

那么，我应该如何更改它以消除警告？

这是我目前使用的 CSS 代码:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }

Answer 1

使用 /deep/ 或 ::ng-deep 的替代方法是禁用 View Encapsulation在使用第三方 UI 元素的组件上。

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.scss'],
  encapsulation: ViewEncapsulation.None
})

这样做意味着:

Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

如果您关闭 View 封装，请确保只定位您真正需要的 html 元素，而不是您应用的不同组件中任何其他相同类型的元素(例如添加自定义 类 或id 到您的元素)。

当我禁用 ViewEncapsulation 时，我还必须在我的 CSS 中使用 !important 来覆盖现有的第三方样式，而 并不总是需要它: :ng-deep.