How to change stroke of SVG (imported as react component) on hover of parent element

Question

I am using react + tailwindcss v3 , but I am unable to figure out how could I change the SVG stroke color on hover of its parent element.

This is the code where I have rendered the SVG component

import Arrow from "../../assets/logos/Arrow_up_right";

const MyComponent= () => {
    const onhover = "blue";
    const normal = "red";

    return (
       <ul className='list-none px-2'>
          <li> className='my-2 h-12 w-12 flex items-center justify-center rounded-lg bg-gray-100 hover:cursor-pointer'>
             <Arrow stroke={normal} />
          </li>
       </ul>
};

Arrow is the component which returns SVG. I have passed a prop to it which then is used in providing color to stroke of arrow svg.

here is the SVG component:

const Arrow_up_right = ({ stroke }) => {
    return (
        <svg
            width='8'
            height='8'
            viewBox='0 0 8 8'
            fill='none'
            xmlns='http://www.w3.org/2000/svg'
        >
            <path
                d='M0.666626 7.33335L7.33329 0.666687M7.33329 0.666687H0.666626M7.33329 0.666687V7.33335'
                stroke={stroke}
                stroke-linecap='round'
                stroke-linejoin='round'
            />
        </svg>
    );
};

export default Arrow_up_right;

The Problem now is I want the value of prop being passed should change on hover of li , if that can't be done then please suggest some other way to do it.

Any help would be appreciated. :)

Answer 1

You could use onMouseEnter and onMouseLeave together with useState to set hover state and based on that pass correct color to Arrow .

But in my opinion better way would be to utilize tailwind group class. You can set group class on li and then in the Arrow_up_right component use tailwind stroke classes stroke-red-500 group-hover:stroke-blue-500 (change number to match your desired color) on svg tag and remove stroke from path .

Answer 2

Try this approach with CSS Variables and Tailwind Utilities , where we pass initial values from the parent component to the child and then use an extra class in the parent <li> .

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .arrow svg path {
    stroke: var(--normal);
  }
  ,
  .arrow:hover svg path {
    stroke: var(--hover);
  }
}

Arrow.jsx

export const Arrow = ({ strokeColor, strokeHover }) => {
  return (
    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M0.666626 7.33335L7.33329 0.666687M7.33329 0.666687H0.666626M7.33329 0.666687V7.33335"
        style={{ '--normal': strokeColor, '--hover': strokeHover }}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

App.jsx

function App() {
  const onhover = 'blue';
  const normal = 'red';

  return (
    <div className="p-6">
      <ul className="list-none px-2">
        <li className="my-2 h-12 w-12 flex items-center justify-center rounded-lg bg-gray-100 hover:cursor-pointer arrow hover:arrow">
          <Arrow strokeColor={normal} strokeHover={onhover} />
        </li>
      </ul>
    </div>
  );
}

Answer 3

I found one more way by which I solved my issue

what you can do is:

import Arrow from "../../assets/logos/Arrow_up_right";

const MyComponent= () => {

    return (
       <ul className='list-none px-2'>
          <li>
             <Button className='my-2 h-12 w-12 flex items-center justify-center rounded-lg bg-gray-100 hover:cursor-pointer'>
                <Arrow />
             </Button>
          </li>
       </ul>
};

index.css

li:hover svg>path {
    stroke: #4352FF;
}

for any other element nesting:

import Arrow from "../../assets/logos/Arrow_up_right";

const MyComponent= () => {

    return (
       <div className='list-none px-2'>
          <button className="calender flex items-center gap-2 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:text-primary hover:bg-white hover:border hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-3">
                <Calender />
                Add To Calender
          </button>
       </div>
};

index.css

.calender:hover svg>path {
    stroke: #4352FF;
}