Angular/Ionic中如何从父组件设置子组件自定义CSS变量

CSS自定义属性（CSS变量）是原生支持继承的属性，和color、font-size这类属性的继承规则完全一致：父元素上定义的CSS变量会自动向下传递给所有后代元素，且天然穿透Shadow DOM，不受Angular视图封装模式的影响，这也是它作为组件定制API的核心优势。

组件侧实现 #

你写的@HostBind属于拼写错误，正确装饰器为@HostBinding，它的作用是把组件类的属性值绑定到组件宿主元素的样式上，仅用于需要通过TS逻辑/输入属性设置CSS变量的场景，纯CSS层面的变量继承不需要写任何TS代码。
标准组件实现示例：

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

@Component({
  selector: 'app-custom-button',
  template: `<button><ng-content></ng-content></button>`,
  styles: [`
    button {
      /* 为每个自定义属性设置默认兜底值，外部未传值时生效 */
      background: var(--btn-bg, #3880ff);
      color: var(--btn-text-color, #ffffff);
      border-radius: var(--btn-radius, 4px);
      padding: 8px 16px;
      border: none;
    }
  `]
})
export class CustomButtonComponent {
  // 可选：如果需要支持通过@Input传值设置变量，可添加HostBinding
  @Input()
  @HostBinding('style.--btn-bg')
  btnBg?: string;
}

组件样式中所有用var(--变量名)引用的属性，就是对外暴露的可定制API，不需要额外做其他配置。

任意父层级传值方法 #

不需要沿着组件树一层层传递参数，只要在目标组件的任意上层父元素（包括组件本身的宿主标签）上给对应CSS变量赋值，下游组件就能自动读取到值，常用传值方式有三种：

• 内联样式直接赋值
  直接在使用组件的标签上通过style属性设置变量，是最简单直接的方式：

  <app-custom-button style="--btn-bg: #10b981; --btn-radius: 8px">
    确认
  </app-custom-button>
  

• 样式类批量赋值
  可以在父组件的样式文件中定义包含自定义属性的主题类，把类加到组件标签或者组件的任意外层容器上即可：

  /* 父组件样式文件 */
  .danger-theme {
    --btn-bg: #ef4444;
    --btn-text-color: #fff;
    --btn-radius: 50px;
  }
  

  <!-- 父组件模板：类加在外层容器上同样生效 -->
  <div class="danger-theme">
    <app-custom-button>删除</app-custom-button>
  </div>
  

• 全局主题赋值
  如果需要定义应用级别的全局样式规则，直接在Ionic项目的全局样式文件global.scss的:root选择器下定义变量即可，所有组件都能读取到全局变量值：

  :root {
    --btn-bg: #3880ff;
    --btn-text-color: #ffffff;
    --btn-radius: 4px;
  }
  

注意：Angular默认的Emulated视图封装模式下，不要在父组件样式中直接通过子组件内部的元素选择器设置变量，只要将变量设置在组件标签本身或者组件的外层父容器上，就可以完全绕过样式封装限制，保证100%生效。

内容的提问来源于stack exchange，提问作者Ernesto Schiavo