Angular——ant design 修改样式

若重置所有某个UI组件，你直接在你的全局style里重置

如果某个页面临时性重置其样式，则

在component.css中

 

把伪类 ::ng-deep 应用到任何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用，该样式就会污染其它组件。

这个例子以所有的 <h3> 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：

在组件内修改

:host  .ant-tabs-ink-bar {
  position: absolute;
  bottom: 11px;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  height: 11px;
  background-color: #1890ff;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 5px;
}

 在组件内修改全局

::ng-deep .ant-tabs-ink-bar {
  position: absolute;
  bottom: 11px;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  height: 11px;
  background-color: #1890ff;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 5px;
}

 

 

详见官方文档