API

样式 API

本文档介绍 TSone 样式管理系统的 API。

StyleManager

import { StyleManager } from '@geektech/tsone/style';

const styleManager = new StyleManager();

StyleManager 方法

• addStyle(name, options): 添加或覆盖命名规则
• removeStyle(name): 移除指定规则
• clearStyles(): 清空所有样式
• destroy(): 清理本实例的样式节点
• useStaticStyleSheet(href): 供 dev/build 生成代码申请静态样式；失败保持内联

renderManagedStyleSheet(styles: Iterable<StyleOptions>): string 是无 DOM 的管理器规则序列化函数。静态样式激活后 styleElement 为 null，styles 仍保留完整 Map；修改恢复原位置的内联节点。

styleManager.addStyle('.button', {
  selector: '.button',
  properties: {
    padding: '8px 16px',
    backgroundColor: '#007bff',
    color: '#fff',
  },
});

styleManager.removeStyle('.button');
styleManager.clearStyles();

组件内样式管理

组件实例可在 initStyles 中通过 this.styleManager 管理局部样式。

class ButtonComponent extends Component<object, object> {
  protected initState() {
    return {};
  }

  protected initStyles() {
    this.styleManager.addStyle('.button:hover', {
      selector: '.button:hover',
      properties: { backgroundColor: '#0069d9' },
    });
  }

  protected render(): VNode {
    return {
      tag: 'button',
      props: { className: 'button' },
      children: ['Click Me'],
    };
  }
}