$class

全局样式

可以基于业务需求创建若干个全局样式 Bean，在全局 Bean 中预先生成若干个样式变量，从而可以在任何 bean 实例中注入使用

Cli命令

可以通过 Cli 命令创建全局样式 Bean。比如，在 a-demo 模块中创建一个全局 Bean myStyle

$ zova :create:style myStyle --module=a-demo

• 该指令会自动创建一个 Bean 文件：a-demo/src/bean/style.myStyle.ts

缺省全局样式

Zova 在模块home-style中提供了一个全局样式 Bean，我们可以直接在这里提供一些全局样式

src/suite/a-home/modules/home-style/src/bean/style.default.ts

@Style()
export class StyleDefault extends BeanBase<ScopeModule> {
  textCenter: string;
  buttonPrimary: string;

  protected async __init__() {
    this.textCenter = this.$style({ textAlign: 'center' });
    this.buttonPrimary = useComputed(() => {
      return this.$style({
        color: this.$token.color.primary,
        borderColor: this.$token.var.borderColor,
      });
    });
  }
}

• this.textCenter是静态样式
• this.buttonPrimary是动态样式

使用缺省全局样式

export class RenderTest extends BeanRenderBase {
  @Use('home-style.style.default')
  $$styleDefault: StyleDefault;

  render() {
    return (
      <div class={this.$$styleDefault.textCenter}>Hello Zova</div>
    );
  }
}

• 使用@Use 注入 Bean 实例，传入 Bean 标识：home-style.style.default

$class

由于缺省全局样式将在不同的 bean 实例中大量使用。为了简化代码，Zova 在 BeanBase 基类中注入了$class对象，从而可以在任何 bean 实例中通过this.$class直接访问全局样式

export class RenderTest extends BeanRenderBase {
  render() {
    return (
      <div class={this.$class.textCenter}>Hello Zova</div>
    );
  }
}