同时引用ng-zorro-antd和ng-zorro-antd-mobile 样式冲突?

Question

angular 同时引用ng-zorro-antd和ng-zorro-antd-mobile 样式冲突怎么解决呢，我想在单个的页面中引用ng-zorro-antd 但是样式始终不生效

如何处理这个冲突

Answer 1

ng-zorro-antd和ng-zorro-antd-mobile使用了相似的CSS定义。在 angular.json 中让ng-zorro-antd的样式在ng-zorro-antd-mobile之前引入，让后加载的样式不会覆盖前面的样式。

"styles": [
  "src/styles.css",
  "node_modules/ng-zorro-antd/src/ng-zorro-antd.css",
  "node_modules/ng-zorro-antd-mobile/dist/ng-zorro-antd-mobile.css"
]

如果需要自定义某些组件的样式，可以使用 Angular 的深度选择器来强制应用特定样式。

::ng-deep .ant-btn {
    background-color: red;
}

对于特定组件，可以通过添加特定的类名来命名空间化样式，以避免冲突。

<div class="my-custom-class">
    <nz-button>按钮</nz-button>
</div>

.my-custom-class ::ng-deep .ant-btn {
    background-color: blue; /* 只影响这个特定按钮 */
}

确保你的自定义样式有足够的优先级来覆盖默认样式。

.my-custom-class .ant-btn {
    background-color: green;
}

或者你可以考虑使用 CSS Modules 或 Scoped Styles 来隔离样式，避免全局冲突。

Answer 2

推荐使用 Shadow DOM 来隔离样式冲突。这种方法简单且有效，可以确保 ng-zorro-antd 和 ng-zorro-antd-mobile 的样式不会互相干扰。可以在需要的组件中设置 encapsulation 属性为 ViewEncapsulation.ShadowDom：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class YourComponent { }