CSS hooks

简介

Filament 使用 CSS「hook」类，让你可以用 CSS 自定义各种 HTML 元素。

发现 hook 类

我们可以把整个 Filament UI 的 hook 类都写进文档，但工作量很大，对你也未必有用。更推荐用浏览器开发者工具检查要自定义的元素，再用 hook 类定位它们。

所有 hook 类都以 fi- 为前缀，便于识别。它们通常出现在 class 列表最前面，容易找到；但若需用 JavaScript 或 Blade 有条件地应用，有时会靠后一些。

若找不到需要的 hook 类，尽量不要绕开它硬改，以免你的样式自定义在未来版本中因破坏性变更而出问题。请提交 pull request 添加所需的 hook 类，我们会帮你保持命名一致。这类 PR 通常甚至不必本地拉取 Filament 仓库，直接在 GitHub 上编辑 Blade 文件即可。

为 hook 类应用样式

例如，若要自定义侧栏颜色，可在浏览器开发者工具中检查侧栏元素，看到它使用 fi-sidebar，然后在应用中添加类似这样的 CSS：

.fi-sidebar {
    background-color: #fafafa;
}

另外，由于 Filament 基于 Tailwind CSS，也可用 @apply 指令把 Tailwind 类应用到 Filament 元素上：

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950;
}

偶尔可能需要用 !important 覆盖已有样式，但请慎用，否则样式会很难维护：

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950 !important;
}

也可以只对特定 Tailwind 类应用 !important（侵入性稍小）：在类名前加 ! 前缀：

.fi-sidebar {
    @apply !bg-gray-50 dark:!bg-gray-950;
}

UI 中有少数部分完全无法用 hook 类样式化，因为它们画在 <canvas> 上，而不是由 HTML 元素构成。图表小部件 以及 统计中的图表 会把这些部分以 CSS 自定义属性的形式暴露出来。

常见 hook 类缩写

hook 类中使用了一些常见缩写，以保持简短易读：

• fi 是「Filament」的缩写
• fi-ac 表示 Actions 包中使用的类
• fi-fo 表示 Forms 包中使用的类
• fi-in 表示 Infolists 包中使用的类
• fi-no 表示 Notifications 包中使用的类
• fi-sc 表示 Schema 包中使用的类
• fi-ta 表示 Tables 包中使用的类
• fi-wi 表示 Widgets 包中使用的类
• btn 是「button」的缩写
• col 是「column」的缩写
• ctn 是「container」的缩写
• wrp 是「wrapper」的缩写

发布 Blade 视图

你可能想把内部 Blade 视图发布到应用中以便自定义。我们不建议这样做，因为未来更新会给你的应用带来破坏性变更。请尽可能使用 CSS hook 类。

若仍决定发布 Blade 视图，请在 composer.json 中把所有 Filament 包锁定到具体版本，再通过手动提高版本号更新 Filament，并在每次更新后完整测试应用。这样能更安全地发现破坏性变更。