组件样式

组件内部样式使用 defineStyle()。内联样式直接传入模板字符串，不需要额外导入 css。

import { defineHtml, defineStyle } from "@elfui/core";

defineStyle(`
  button {
    border-radius: 8px;
    padding: 8px 12px;
  }
`);

export const ElfButton = defineHtml(` <button><slot></slot></button> `);

样式会随组件定义进入 Shadow DOM，不污染页面全局。

多段样式

defineStyle() 可以调用多次，适合拆分基础样式和状态样式。

defineStyle(baseStyle);
defineStyle(stateStyle);
// 也可以写成：defineStyle(baseStyle, stateStyle);

beta.7 已删除 css tagged-template helper，组件统一使用 defineStyle(\...`)`。

动态样式

TIP

组件状态变化优先映射到 class、attribute 或 CSS 变量，再由 CSS 处理。