覆盖雏菊用户界面中的按钮颜色？

【问题标题】：Override button color in daisy UI?覆盖雏菊用户界面中的按钮颜色？
【发布时间】：2023-02-12 22:57:04
【问题描述】：

Daisy UI 有按钮：https://daisyui.com/components/button/

但是，我想覆盖特定按钮的颜色，而不必费力创建整个主题。

我可以只在按钮上使用 bg-green-500，但这会只是更改背景颜色时，我还需要更改所有关联的颜色。

有没有好的方法来做到这一点？

【问题讨论】：

所有相关颜色是什么意思？
如果我将菊花 ui 按钮设置为“成功”颜色——它不仅会更改背景。它还会更改轮廓/阴影等。
您能否分享您如何使用它的代码或可重现的示例？

标签： tailwind-css daisyui

【解决方案1】：

AFAIK，为此，您需要覆盖 tailwind.config.js 文件中的当前主题。

请注意，您导入主题的基础：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx,jsx,js}"],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          primary: "#7cb3dd",
      
        },
      },
    ],
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
};

在这里，我们将原色覆盖为 #7cb3dd 以用于“浅色”主题。

根据需要调整！

这里有更多信息： https://daisyui.com/docs/themes/

【讨论】：