Filament 使用 CSS "钩子" 类来允许各种 HTML 元素使用 CSS 进行自定义。
我们可以记录遍布整个 Filament UI 的所有 hook 类，但这将是一项大量的工作，而且可能对你来说没多大用处。相反，我们建议你使用浏览器的开发者工具来检查你想自定义的元素，然后使用 hook 类来定位这些元素。
所有钩子类都以 fi- 为前缀，这是识别它们的绝佳方式。它们通常位于类列表的开头，因此很容易找到，但有时如果我们需要使用 JavaScript 或 Blade 有条件地应用它们，它们可能会在列表中靠后。
如果您找不到所需的钩子类, 请尽量不要绕过它, 因为这可能会使您的样式自定义在未来的版本中面临重大更改. 相反, 请提交一个拉取请求来添加您需要的钩子类. 我们可以帮助您保持命名一致性. 您甚至可能不需要将 Filament 仓库本地克隆下来进行这些拉取请求, 因为您可以直接在 GitHub 上编辑 Blade 文件.
举例来说，如果你想自定义侧边栏的颜色，你可以在浏览器的开发者工具中检查侧边栏元素，看到它使用了 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;
}你甚至可以应用 !important 到特定的 Tailwind 类，这种方式侵入性稍弱，通过在类名前添加 ! 实现：
.fi-sidebar {
@apply !bg-gray-50 dark:!bg-gray-950;
}我们使用一些常用缩写在我们的钩子类中，以保持它们简短且易读：
fi 是 "长丝" 的缩写fi-ac 用于表示 Actions 包中使用的类fi-fo 用于表示 Forms 包中使用的类fi-in 用于表示 Infolists 包中使用的类fi-no 用于表示 Notifications 包中使用的类fi-sc 用于表示 Schema 包中使用的类fi-ta 用于表示 Tables 包中使用的类fi-wi 用于表示 Widgets 包中使用的类btn 是 "button" 的缩写col 是 "列" 的简称ctn 是 "容器" 的缩写wrp 是 "封装器" 的缩写您可能很想将内部 Blade 视图发布到您的应用程序中，以便您可以自定义它们. 我们不建议这样做，因为它将在未来的更新中为您的应用程序引入破坏性变更. 请尽可能使用 CSS 钩子类.
如果您确实决定发布 Blade 视图，请在您的 composer.json 文件中将所有 Filament 包锁定到特定版本，然后通过提升此版本号手动更新 Filament，并在每次更新后测试您的整个应用程序。这将帮助您安全地识别重大更改。