自定义样式

#概述

Filament 使用 CSS "钩子" 类，让各种 HTML 元素都可以使用 CSS 定制。

#发现钩子类

我们可以将整个 Filament UI 的所有钩子类记入文档中，不过那样工作量很大而且对你未必有用。因此，我们推荐使用浏览器的开发者工具去查看你想要自定义的元素，然后使用这些钩子类去锁定目标元素。

所有的钩子类使用 fi- 前缀，很容易识别。通常，在类列表的开头位置，因此，很容易找到；不过有时候会因为条件性使用 JavaScript 或 Blade 应用这些类而使之滑落到列表后面。

如果你创没有找到你需要的钩子类，尽量不要绕过它，因为它可能会打开你的样式自定义，从而在未来的版本中造成破坏性更改。同时，请发送 PR 去添加你需要的钩子类。我们可以帮你保持命名的一致性。你甚至可能都不需要为了 PR 在本地拉取 Filament 库，因为你可以直接在 GitHub 上编辑该 Blade 文件。

#将样式应用到钩子类中

比如，如果你想自定义侧边栏(sidebar)的颜色，你可以在浏览器开发者工具中检查侧边栏元素，发现它使用 fi-sidebar 类，然后像这样将 CSS 添加到你的应用中：

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

此外，因为 Filament 是基于 Tailwind CSS 构建，你可以使用 @apply 指令将 Tailwind 类应用到 Filament 元素中：

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

你偶尔可能需要使用 !important 修饰符来重写现有的样式，但请谨慎使用，因为这会使您的样式难以维护：

.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-sidebar {
    @apply !bg-gray-50 dark:!bg-gray-950;
}

#常见钩子类缩写

我们在钩子类中使用了一些常用缩写，以保证它们简短和可读性：

• fi 是 "Filament" 的缩写
• fi-ac 用于表示 Actions 包中的类
• fi-fo 用于表示表单构造器(Form Builder)包中的类
• fi-in 用于表示消息列表(Infolist)包中的类
• fi-no 用于表示通知生成器(Notifications)包中的类
• fi-ta 用于表示表格构造器(Table Builder)包中的类
• fi-wi 用于表示页内插件(Widgets)包中的类
• btn 是 "button" 的缩写
• col 是 "column" 的缩写
• ctn 是 "container" 的缩写
• wrp 是 "wrapper" 的缩写

#发布 Blade 视图

您可能会想将内部 Blade 视图发布到应用程序中，以便进行自定义。我们不建议这样做，因为它会在将来的更新中对应用程序造成破坏性更改。请尽可能使用 CSS 钩子类。

如果你确实要发布这类 Blade 视图，请在 composer.json 中将所有 Filament 包锁定到特定版本，然后通过碰撞版本号手动更新 Filament，在每次更新后测试整个应用。这将帮助你安全地识别破坏性更新。

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion