TailwindCSS/daisyUI下拉组件无法更改颜色

Question

我正在使用TailwindCSS和daisyUI构建下拉菜单。代码在下面。

问题是，当一个下拉菜单项被点击(当它变成活动的时候)，它变成紫色，即使我在<li>元素上使用实用工具类<li>。如何自定义下拉菜单项的颜色？我非常喜欢只使用CSS的解决方案，因为我使用的是Tailwind和daisyUI的CDN版本(因此没有tailwind.config.js可修改)。

​

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a>Item 1</a></li>
    <li class="bg-white"><a>Item 2</a></li>
  </ul>
</div>

​

Answer 1

我把颜色改成了pink-200。

​

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a class=" hover:bg-pink-200 focus:bg-pink-200">Item 1</a></li>
    <li class="bg-white"><a class="hover:bg-pink-200 focus:bg-pink-200">Item 2</a></li>
  </ul>
</div>

​

Answer 2

我尝试将active:bg-white添加到正在更改bg颜色的<a>标记中，但DaisyUI重写了它。

在无法更改配置的情况下，我所做的是在<style>块中添加样式覆盖。

​

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<style>
.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):active) {
  background-color: white !important;
  color: black;
}
</style>
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

​