1

我使用 TailwindCSS 和 DaisyUI（通过 CDN）。

使用DaisyUI Dropdown时，有什么方法可以更改下拉项的颜色吗？这包括下拉菜单本身的背景颜色，然后将鼠标悬停在项目上（CSS :hover），然后单击它（CSS :active）。

点击时 （点击时）

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

<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; 
}
4

1 回答 1

0

您可以通过为 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>
于 2021-10-08T15:37:25.123 回答