DaisyUI 自定义主题手柄禁用按钮

Question

我正在制作一个 Reddit SSO 按钮，但遇到了一个问题：我为 Reddit 按钮制作的自定义主题在禁用时会变成辅助灰色。

这是我在 tailwind.config 中的主题

  daisyui: {
    themes: [
      {
        reddit: {
          primary: "#FF4500", // Reddit primary
          secondary: "#FF5700",
          accent: "#888888",
          neutral: "#3d4451",
          "base-100": "#ffffff",
          info: "#3ABFF8",
          success: "#36D399",
          warning: "#FBBD23",
          error: "#F87272",
          disabled: "#FF450080", // Muted primary color, this does not work
        },
      },
    ],
  }

这是它看起来没有残疾的样子，一切都很好：

但是按钮禁用时的外观如下：

当然我可以做一个 !important 或其他东西来覆盖颜色，但我假设 Daisy 应该有某种方法通过添加主题或类似的方式来处理禁用状态。

在 Daisy/Tailwind 中为禁用按钮状态添加自定义颜色的正确方法是什么？

这是按钮代码供参考

<button
  onClick={onSignin}
  disabled={isAuthenticating}
  className="ml-2 text-white btn btn-primary group btn-block"
  data-theme="reddit"
>
  <div className="z-10">
    {isAuthenticating ? "Signing in..." : "Sign in with"}
  </div>
  <RedditIcon className="h-6 -ml-2.5" />
</button>

Answer 1

根据 Daisy UI 按钮的源代码：

.btn {
  …

  &.btn-disabled,
  &[disabled],
  &:disabled {
    @apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
  }
  @media (hover: hover) {
    &-disabled:hover,
    &[disabled]:hover,
    &:disabled:hover {
      @apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
    }
  }
}

禁用按钮的背景颜色来自

neutral

颜色。所以，你可以：

• 更改

  neutral

  颜色：

  daisyui: {
    themes: [
      {
        reddit: {
          …
          neutral: "…",
  

• 在 CSS 中有一个自定义规则来覆盖此规则：

  .btn-primary:is(.btn-disabled, [disabled], :disabled) {
     background-color: …
  }
  

• 使用一些 Tailwind 类

  <button
    …
    className="ml-2 text-white btn btn-primary group btn-block disabled:bg-<color>"