0
269
ViewsCómo cambiar el trazo de SVG (importado como componente de reacción) al pasar el mouse sobre el elemento principal
Estoy usando react + tailwindcss v3 , pero no puedo averiguar cómo podría cambiar el color del trazo SVG al pasar el hover sobre su elemento principal.
Este es el código donde he renderizado el component SVG
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 es el componente que devuelve SVG. Le he pasado un prop que luego se usa para proporcionar color al trazo de arrow svg.
aquí está el componente SVG:
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; El problema ahora es que quiero que el valor de prop que se pasa cambie al pasar el hover sobre li , si eso no se puede hacer, sugiera otra forma de hacerlo.
Cualquier ayuda sería apreciada. :)
3 answers
Answer question0
Pruebe este enfoque con CSS Variables y Tailwind Utilities , donde pasamos los valores iniciales del componente principal al secundario y luego usamos una clase adicional en el <li> principal.
índice.css
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .arrow svg path { stroke: var(--normal); } , .arrow:hover svg path { stroke: var(--hover); } }Flecha.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> ); };Aplicación.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> ); }0
Encontré una forma más por la cual resolví mi problema
lo que puedes hacer es:
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> };índice.css
li:hover svg>path { stroke: #4352FF; }para cualquier otro elemento de anidamiento:
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> };índice.css
.calender:hover svg>path { stroke: #4352FF; }0
Puede usar onMouseEnter y onMouseLeave junto con useState para establecer el estado de desplazamiento y, en función de eso, pasar el color correcto a Arrow .
Pero en mi opinión, la mejor manera sería utilizar la clase group de viento de cola. Puede configurar la clase de group en li y luego, en el componente Arrow_up_right , use las clases de trazo de viento de cola stroke stroke-red-500 group-hover:stroke-blue-500 (cambie el número para que coincida con el color deseado) en la etiqueta svg y elimine el trazo de la path .