Quiero cambiar el color de la barra de navegación en el desplazamiento, a través del enlace useState.
const Navbar = () => { const [colorChange, setColorchange] = useState(false); const changeNavbarColor = () =>{ if(window.scrollY >= 38){ setColorchange(true); } else{ setColorchange(false); } }; console.log(setColorchange) window.addEventListener('scroll', changeNavbarColor);Estoy tratando de controlar el componente de estilo a continuación, ¿cómo controlo el fondo: prop con cualquier estado?
const NavbarContainer = styled.div` width: 100%; height: 38px; background-color: red; margin-top: 10px; display: flex; justify-content: space-between; position: sticky; top:0; z-index: 1; `;Puedes pasar accesorios:
<NavbarContainer bg={yourDynamicColor}> ... </NavbarContainer> const NavbarContainer = styled.div` background-color: ${props => props.bg}; // you can write any javascript, eg: color: ${({bg}) => bg === 'white' : 'black' : 'white'} `;const NavbarContainer = styled.div` width: 100%; height: 38px; background-color: ${props => props.colorChange ? "red" : "blue"}; margin-top: 10px; display: flex; justify-content: space-between; position: sticky; top:0; z-index: 1; `;Creo que la mejor manera es actualizar el nombre de clase de su componente según el estado. También inicie su eventListener en useEffect y elimínelo cuando se desmonte el componente.
import React, { useEffect, useState } from 'react'; const Navbar = () => { const [colorChange, setColorchange] = useState(false); const changeNavbarColor = () => { if(window.scrollY >= 38){ setColorchange(true); } else{ setColorchange(false); } }; useEffect(() => { window.addEventListener('scroll', changeNavbarColor); return () => { window.removeEventListener('scroll', changeNavbarColor); } }, []) return ( <div className={colorChange ? 'colorBlack' : 'colorWhite'}> <p>Your navbar</p> </div> ) } export default Navbar;