英文:
Tailwind background on hover not changing
问题
我有一个包含信息和HEX颜色属性的对象数组，我对这个数组进行了映射，并将对象传递给一个React组件，我对对象进行了解构，当我悬停在对象上时，我希望它的背景颜色变为对象的颜色。在Tailwind中，应该像这样：hover:{color}，但没有变化。可能的问题是什么？
我已经检查过，悬停在普通颜色上可以正常工作，我在Tailwind配置文件中有自定义颜色，但背景没有改变。
英文:
I have a array of objects that with information and a HEX color a property, I do a map of this array and pass the object to a react component, I do de-estructuring of the object, and I want that when I make hover on the object its background changes to the color of the object. In tailwin it fill be something like this
hover:{color} but it doesn't change. What could be the problem?
I have checked that the hover does work with a normal color, I have custom colors in the tailwind config file, and neither the background changed.
答案1
得分: 1
指定鼠标悬停时的背景颜色，语法必须是：className="hover:bg-[#HEXCODE]"。
但只有在事先知道颜色的情况下才能实现这一点。对于动态颜色，例如：
const whiteColor = "#FFFFFF"; 以及 className={`bg-[${whiteColor}]`}
这不起作用。Tailwind 需要整个类一起，因此您可以这样做：
const whiteColor = "bg-[#FFFFFF]"; 以及 className={whiteColor}
这将有效，因为在编译过程中，Tailwind 知道要添加的所有类是什么。
因此，对于您的用例，如果您想要动态颜色，如果您不知道所有可能的动态颜色，可以使用 styles={{}}，否则可以在 tailwind 配置文件中定义它们，或者使用上述方法。
英文:
For specifying a background color on hover, the syntax must be: `className="hover:bg-[#HEXCODE]".
But this can only be done if you know the color beforehand. For dynamic colors, for eg.
const whiteColor = "#FFFFFF"; and className={`bg-[${whiteColor}]`}
This will not work. Tailwind needs the whole class to be together, so you can do something like:
const whiteColor = "bg-[#FFFFFF]"; and className={whiteColor}
This will work, as while compilation tailwind knows precisely what all classes are to be added.
So, for your use case, if you want dynamic colors, you can use styles={{}} if you do not know all the possible dynamic colors, else you can define them in the tailwind config file or use the above approach.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论