(顺风- DaisyUI)有什么方法可以改变下拉项的悬停和活动颜色吗？

Question

我使用TailwindCSS和DaisyUI (通过CDN)。

使用DasiyUI Dropdown时，有没有办法改变下拉菜单的颜色？这包括下拉菜单本身的背景色，然后悬停在项目上(CSS :hover)，然后单击它(CSS :active)。

​

(单击时)

到目前为止，我已经能够更改dropdown本身和悬停时的背景颜色。

                    <div class="dropdown">
                    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
                        <p class="text-medium">Testing</p>
                    </div>
                    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
                        <li class="rounded hover:bg-gray-300 dropdown-active">
                            <a href="page-one.html">Protecting your privacy</a>
                        </li>
                    </ul>
                </div>

当列表被点击颜色(CSS激活)时，我似乎无法使用：

.dropdown-active:active {
   background-color: #0B6339 !important; 
}

Answer 1

您可以通过为DaisyUI定义自定义主题颜色来实现它。

将此块添加到tailwind.config.js中，并根据需要编辑颜色：

daisyui: {
    themes: [
      {
        'mytheme': {
          'primary': '#570df8',
          'primary-focus': '#4506cb',
          'primary-content': '#ffffff',
          'secondary': '#f000b8',
          'secondary-focus': '#bd0091',
          'secondary-content': '#ffffff',
          'accent': '#37cdbe',
          'accent-focus': '#2aa79b',
          'accent-content': '#ffffff',
          'neutral': '#3d4451',
          'neutral-focus': '#2a2e37',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#d1d5db',
          'base-content': '#1f2937',
          'info': '#2094f3',
          'success': '#009485',
          'warning': '#ff9900',
          'error': '#ff5724',
        },
      },
    ],
  },

然后使用颜色类名称，就像Tailwind的颜色名称一样。

<li class="hover:bg-secondary-focus">
  <a>Item 1</a>
</li>