¡Gracias por revisar mi pregunta!
Tengo un color que el cliente ha seleccionado. El color tiene un contexto de aplicación completo. hasta ahora, todos los elementos de los que deseo cambiar el color de backgroundColor cambiarán a { color } . Esto se hace de manera muy simple así:
<div className='navbar' style={{ background: color }}>Quiero realizar lo mismo pero solo cambiar el color de fondo al pasar el mouse.
Tengo una idea en mi cabeza sobre cómo realizarlo usando Vanilla JS, por lo que no estoy seguro de cómo realizarlo dentro de una aplicación React. Esto es lo que he evocado:
export default function RecipeList( {recipes} ) { const hoverColorItems = document.querySelectorAll('.hoverColor'); hoverColorItems.forEach((item) => { item.addEventListener("onFocus", function() { item.style.backgroundColor = { color } }) }) return ( <> <Link className="hoverColor">Button</Link> </> ) }Por supuesto, no espero que forEach y querySelector onFocus funcionen... Solo lo estoy usando como referencia para transmitir mi idea, ya que me resulta mucho más familiar.
¡Gracias!
Primero, cuando usa una biblioteca declarativa como React, no debe comunicarse directamente con el DOM. En su lugar, debe declarar cómo debería verse el DOM dado cierto estado. Más tarde, cambia el estado para lograr el efecto de interfaz de usuario que desea.
Para cambiar el estado cuando el usuario entra y sale, puede usar onMouseEnter y onMouseLeave .
El código debe ser algo como
function App({color}) { const [isFocused, setFocus] = useState(false); return ( <Link href="https://stackoverflow.com" onMouseEnter={() => setFocus(true)} onMouseLeave={() => setFocus(false)} className="hoverColor" style={{ backgroundColor: isFocused ? color : "" }} > Style via React </Link> ); } Puedes ver que le dices a reaccionar qué quieres hacer (establecer backgroundColor rojo) para un estado determinado ( isFocused es true ), por lo que para manipular el DOM debes llamar a setFocus .
Dicho esto, realmente recomiendo usar soluciones css cuando sea posible. En este caso, puede lograr fácilmente el efecto de desplazamiento/enfoque usando css usando variables para pasar el color de React al css.
<Link style={{ "--background-color": color }} href="https://stackoverflow.com" className="link-hover" > Style via Css </Link> .link-hover:hover { background-color: var(--background-color); }Demostración con ambas formas: https://codesandbox.io/s/pensive-sun-m9jv2s?file=/src/App.js
(Simulé el componente Link para la demostración, el suyo probablemente se vea un poco diferente).