<button
onClick={fetchExchangeRates}
style={{ backgroundColor: `${selectedColor}` }}
className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md"
> Convert
<FontAwesomeIcon className='text-white' icon={faArrowRight} />
</button>
In my Redux store, I have set up to fetch the color dynamically and apply it. Currently, I can only apply the main color but am unable to implement UX improvement features like button click and hover effects.
The challenge here is to achieve this dynamically.
Another problem I noticed is:
const colorOptions = ["#C53030", "#2F855A", "#1E40AF", "#6B46C1", "#D97706", "#B83280",];
const colors = [
{ hover: "#dc2626", main: "#b91c1c", active: "#991b1b" }, // red
{ hover: "#16a34a", main: "#15803d", active: "#166534" }, // green
{ hover: "#2563eb", main: "#1d4ed8", active: "#1e40af" }, // blue
{ hover: "#9333ea", main: "#7e22ce", active: "#6b21a8" }, // purple
{ hover: "#ea580c", main: "#c2410c", active: "#9a3412" }, // orange
{ hover: "#e11d48", main: "#be123c", active: "#9f1239" }, // rose
]
return (
<div className="grid grid-cols-3 gap-5 sm:gap-2 rounded-md bg-white p-5 sm:p-2 w-max mx-auto">
{colors.map((color, index) => {
const c = "blue";
const backgroundColor = `bg-[blue]`; // works fine with string values
// const backgroundColor = `bg-[blue]`; // Works fine as template literal
// const backgroundColor = `bg-[${c}]`; // but doesn't work if we try to modify the string
console.log(backgroundColor);
return (
<div
key={index}
// style={{ backgroundColor: color }}
className={`h-12 w-12 sm:h-6 sm:w-6 rounded-full ${backgroundColor}`}
onClick={() => handleColorChange(color)}
></div>
);
})}
</div>
)
I discovered that dynamically changing Tailwind CSS class values is not possible. Predefined values like bg-[#fff] work, but for other properties like text and borders, a more flexible approach is needed.
colors = [
{backgroundHover: "bg-red-600", backgroundColor : "bg-red-700", backgroundAction : "bg-red-800", textColor : "text-red-700", borderColor : "border-red-700"},
{backgroundHover: "bg-green-600", backgroundColor : "bg-green-700", backgroundAction : "bg-green-800", textColor : "text-green-700", borderColor : "border-green-700"},
{backgroundHover: "bg-blue-600", backgroundColor : "bg-blue-700", backgroundAction : "bg-blue-800", textColor : "text-blue-700", borderColor : "border-blue-700"},
{backgroundHover: "bg-orange-600", backgroundColor : "bg-orange-700", backgroundAction : "bg-orange-800", textColor : "text-orange-700", borderColor : "border-orange-700"},
]
This hardcodes the implementation, making it less programmatic.
My expectations are:
- I want to dynamically change the hover and active colors of a button, in addition to setting text and border colors dynamically.
- While this is achievable through Tailwind CSS using a more manual approach, how can we accomplish this with normal CSS?