How to set :hover and :active color on a react jsx component?

Question

<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>

I have a redux store set up from there I will fetch the color and apply dynamically. I can apply the main color . But I can't apply ux improvement features like button click and hover effect.

Challenge here is we need to do that dynamically.

One more 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>

  )

So what I learned is we can't dynamically change the tailwind class values. we can write predefined values like bg-[#fff] and it will work. But here comes another problem I am not only going to use the color on the background only but also on text and borders. so I need to write something like this :

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"},
]

which is bit like hardcoded and not so programmatic .

So my expectations :

I want to change the hover and active colors on a button dynamically and add also set the color of text and border dynamically.
Its possible in the hard way using Tailwindcss but how do we do it with normal CSS ?

Wongjn · Accepted Answer · 2023-09-16 10:17:20Z

1

You could consider setting CSS variables on the element. This would allow you to use dynamic colors with Tailwind variants:

{colors.map((color, index) => {
  <div
    …
    style={{
      '--main': color.main,
      '--hover': color.hover,
      '--active': color.active,
    }}
    className="… bg-[--main] hover:bg-[--hover] active:bg-[--active]`}
  >

You could then extend this to text and border colors too like:

text-[color:--main] border-[color:--main]

I am using the CSS variable shortcut syntax introduced in Tailwind v3.3. If you are using a Tailwind version 3 lower than this, you would need to add the var() function like bg-[var(--main)].

answered Sep 16, 2023 at 10:17

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bishal Kar Over a year ago

I am using latest Tailwind 3.3.3 I have fixed it. I made use of onMouseEnter. onMouseLeave, onMouseDown, onMouseup event listeners to achieve the results. It was a very strange problem to be honest. I don't know some simple and basic javascript that's all. Here is the code : github.com/bishalkar10/Currency-Globe/blob/main/src/components/…

Collectives™ on Stack Overflow

How to set :hover and :active color on a react jsx component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related