组件样式 - 图1 This article has not been translated, hope that your can PR to translated it. Help us!组件样式 - 图2

组件样式

当你在使用 ng g ng-alain:list 来生成页面时，会发现并不会产生 Less 文件，主要是 NG-ALAIN 有自己的一套主题系统，NG-ALAIN 希望利用这套主题系统来构建组件，让 CSS 变成编程化。然而它并不能满足所有需求，本文会针对这方面做一个全面描述。

如何开始

手动创建组件样式文件，下面以 img.component.less 为示例：

  1. // 导入 Less 变量参数
  2. @import '~@delon/theme/index';
  4. :host {
  5.   // 组件宿主样式
  6.   display: block;
  7.   font-size: 16px;
  9.   ::ng-deep {
  10.     // 组件内其他样式
  11.     .title {
  12.       color: @text-color;
  13.     }
  14.   }
  15. }

这个 img.component.less 样式文件包含了许多信息：

~@delon/theme/index

它包容了 NG-ZORRO、@delon/theme、@delon/abc、@delon/chart 主题系统所有的 Less 变量名，只有这样导入才能使我们在下面引用 @text-color 这类 Less 变量，它表示默认的颜色值。

如果你正在使用商业主题，例如 PRO 会使用其他路径：@import 'src/styles/theme.less';。

特殊选择器

:host、::ng-deep 它们是 Angular 特殊选择器：

  • :host 表示组件宿主，假设我们当前的组件名为 img，那最终 :host 会被解析成 img 的样式

  • ::ng-deep 表示禁止对视图包装，这有助于减少生成一些额外的标识符，它会影响子组件的的使用，例如：.title 会在 <img> 组件内所有包含 class="title" 都将有效

主题

NG-ALAIN 至从 9.3.x 开始内置暗黑与紧凑两种主题，对于全局只需要修改 styles.less 一个参数，例如切换为暗黑主题：

  1. - // @import '~@delon/theme/theme-dark.less';
  2. + @import '~@delon/theme/theme-dark.less';

若是紧凑，只需要换成 @import '~@delon/theme/theme-compact.less';。

同时，对于组件样式的引入也全部替换成：

  1. - @import '~@delon/theme/index';
  2. + @import '~@delon/theme/theme-dark';

动态主题

如果你正在制作就像现在网站一样，动态切换不同的主题，那么就必须针对不同的主题额外覆盖，例如当开启暗黑时，将 .title 换成 #000 颜色值：

  1. // 导入 Less 变量参数
  2. @import '~@delon/theme/index';
  4. :host {
  5.   // 组件宿主样式
  6.   display: block;
  7.   font-size: 16px;
  9.   ::ng-deep {
  10.     // 组件内其他样式
  11.     .title {
  12.       color: @text-color;
  13.     }
  14.   }
  15. }
  17. [data-theme='dark'] {
  18.   :host ::ng-deep {
  19.     .title {
  20.       color: #000;
  21.     }
  22.   }
  23. }

若紧凑主题：

  1. [data-theme='compact'] {
  2.   :host ::ng-deep {
  3.     // 针对紧凑重新定义
  4.   }
  5. }

相关链接