显示侧边栏

自定义

了解如何根据自身需求自定义组件，是使用 Flux 的关键一环。Flux 提供了多层级的自定义能力，因此无需在“全量接收”和“完全放弃”之间二选一。

Tailwind 覆盖

自定义的第一层方式，就是直接将你自己的 Tailwind 类传入组件。

这通常适用于诸如自定义宽度之类的场景：

<flux:select class="max-w-md">

不过，有时你临时添加的 Tailwind 类会与 Flux 的内部样式发生冲突。

例如，下面展示了你可能尝试自定义按钮背景色的方式：

<flux:button class="bg-zinc-800 hover:bg-zinc-700">

然而，由于 Flux 会应用它自己的 bg-* 类，最终输出的 HTML 中会同时出现两套类，但只有其中一套会生效：

<button type="button" class="bg-zinc-800 hover:bg-zinc-700 bg-white hover:bg-zinc-100...">

解决这类冲突最简单的方法，是使用 Tailwind 的 important（!）修饰符，如下所示：

<flux:button class="bg-zinc-800! hover:bg-zinc-700!">

产生冲突的工具类仍会同时被渲染；不过，带有 ! 修饰符的用户自定义类会具有更高优先级。

有时确实需要使用 !。但更多时候，建议新建一个组件，或通过新增变体来定制现有组件。下文会进一步介绍。

初次安装 Flux 时，所有组件即可直接在应用内任意 Blade 文件中使用。

如有需要，你可以将任意组件“发布”到你的项目中，这样该组件对应的所有 Blade 文件就会归属于你的项目。

起初你可能会犹豫是否发布组件，担心无法继续获得自动更新；不过这并没有想象中可怕。要发布某个组件，只需运行以下 Artisan 命令：

php artisan flux:publish

接着系统会提示你搜索并选择要发布的组件。如果你想一次性发布全部组件，可以使用 --all 标志：

php artisan flux:publish --all

假设你决定将 checkbox 组件发布到你的项目中，那么你会在以下位置找到该组件文件：

resources/    views/        flux/            checkbox.blade.php            ...

现在，你仍可像以往那样正常使用该 checkbox 组件，但将优先使用已发布到项目中的 Blade 文件而非原始文件。这意味着你可以随意修改该组件的各类细节，例如类名、插槽以及变体。

大多数在 Flux 组件内部使用的 HTML 元素都带有 data-flux-* 属性。你可以利用该属性覆盖任意你想覆盖的样式。下面是一个使用 Tailwind 的 @apply 指令来修改所有按钮默认背景色的示例：

<style>    [data-flux-button] {        @apply bg-zinc-800 dark:bg-zinc-400 hover:bg-zinc-700 dark:hover:bg-zinc-300;    }</style>