tailwindcss/daisyui下拉组件无法更改颜色

发布于 2025-02-07 01:57:11 字数 1159 浏览 1 评论 0原文

我正在与TailWindCSS和Daisyui合作，以建立下拉菜单。代码在下面。

问题在于，当单击下拉菜单项（当它变得活跃时）时，即使我在＆lt; li＆gt上使用了实用程序类bg-white，它也会变成紫色。 ;元素。单击时，如何自定义下拉菜单项的颜色？我真的更喜欢一种仅CSS的解决方案，因为我正在使用Tailwind和Daisyui的CDN版本（因此没有tailwind.config.js可以修改。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

原文

I'm working with TailwindCSS and daisyUI to build a dropdown menu. The code is below.

The problem is that when a dropdown menu item is clicked on (when it becomes active), it becomes purple, even though I'm using the utility class bg-white on the <li> element. How can I customize the color of the dropdown menu items on click? I'd really prefer a solution that is CSS-only, as I am using the CDN versions of Tailwind and daisyUI (and therefore have no tailwind.config.js to modify.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

闻呓 2025-02-14 01:57:11

我尝试将Active添加到＆lt; a＆gt;标签中， 正在更改BG颜色，但Daisyui覆盖了它。

在无法更改配置的情况下，我所做的工作将在＆lt; style＆gt; block中添加。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

I tried adding active:bg-white to the <a> tags that were changing bg color, but DaisyUI overrides it.

Without being able to change the config, what I have done is added the style override in a <style> block.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

回复收藏 0 原文

凌乱心跳 2025-02-14 01:57:11

我将颜色更改为pink-200。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

I had changed the color to pink-200.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

回复收藏 0 原文

~没有更多了~