Hover w obiekcie w react

Question

Mam obiekt w react js

const navStyle={
     color: 'white',
     textDecoration: 'none',
}

i chciałbym dodać do niego parametr hover

Comments

Używasz tego w połączeniu ze Styled Components?

---

w sensie komponent wygląda tak

const Nav = () => {
    const navStyle={
        color: 'white',
        textDecoration: 'none',
    }

    return(
        <nav className="Nav">
            <h3>Akwarele</h3>
            <ul className="nav-links">
                <Link style={navStyle} to='/'>
                    <li>Start</li>
                </Link>
                <Link style={navStyle} to='/galeria'>
                    <li>Galeria</li>
                </Link>
                <Link style={navStyle} to='/wydarzenia'>
                    <li>Wydarzenia</li>
                </Link>
            </ul>
        </nav>
    )
} 

 

---

ten Link to jest jakiś Twój komponent, czy coś z zewnętrznych bibliotek?

---

Obstawiam, że to komponent z React Routera.

---

Ok w takim razie najprościej będzie dodać klasę do <li> i tam ogarniać hovera

---

dzięki

Answer 1

Z tego co się orientuję, to nie da się inline'owo dodać pseudo klasy (a do takich zalicza się :hover), bo definiuje się je jako część selektora CSS. Powinieneś więc zapisać style związane z :hover w kodzie CSS, np. w formie klasy i tę klasę dodać do elementu HTML poprzez className.