我可以在组件中使用 antd less 变量吗？

Question

问题

我正在使用 NG-ZORRO 来使 UI 更加标准化。

我有一个业务组件，我想将主色与 Ant Design 保持一致。我在 Angular Material 中看到了Theming Your Own Components，但我还没有找到 NG-ZORRO 的解决方案。当我在组件的样式文件（例如 test.component.less）中使用

@primary-color

时，出现错误：

Variable @primary-color is undefined

。

如何在自己的组件中引用 NG-ZORRO less 变量？

我的解决方案

我找到了一个解决方案，但我不确定它是否优雅。

在少组件中，我在第一行导入了

path/to/ng-zorro-antd/style/themes/default.less

，然后

border: 1px solid @primary-color

也可以工作。

在我的组件中使用 NG-ZORRO less 变量是正确的方法吗？

Answer 1

ng-zorro-antd

现在支持 CSS 变量。您可以将主题变量传递给模块配置：

import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';

const ngZorroConfig: NzConfig = {
  theme: {
    primaryColor: '#1890ff'
  }
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule
  ],
  providers: [
    { provide: NZ_CONFIG, useValue:  ngZorroConfig  }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

您可以将

ngZorroConfig

存储在共享位置并在任何地方访问。此外，您还可以在 CSS 文件中使用由

ng-zorro-antd

创建的 CSS 变量。就像

--ant-primary-color

。

更多信息： https://ng.ant.design/docs/customize-theme-variable/en

Answer 2

与 Angular Material 类似，您可以在项目中创建自定义主题并将其用于您的组件：https://ng.ant.design/docs/customize-theme/en