Estoy trabajando en un sitio web personal que presenta texto de estilo aleatorio para el encabezado. Actualmente solo está aleatorizando la fuente y el color (aunque planeo agregar más) y lo estoy logrando eligiendo un valor de una lista predefinida de cadenas. Dado que la aleatorización debe ocurrir en JavaScript, todo el estilo se realiza a través del estilo en línea de React (en una const llamada StyleObj). Para personalizar aún más mi texto, instalé la biblioteca Radium, que me permite usar el selector CSS :hover. Mi problema proviene del hecho de que, aparentemente, el selector :hover está implementado de alguna manera que fuerza una recompilación de mi StyleObj y, por lo tanto, vuelve a dibujar una fuente y un color aleatorios. ¿Hay algo que pueda hacer para mantener el color o la fuente asignados previamente después de que se desplace el cursor mientras conservo mi objetivo de asignar fuentes y colores al azar al hacer clic?

Además, los colores y las fuentes son temporales. jajaja

 import React, { useState } from 'react'; import Radium from 'radium'; import "./Navbar.scss"; /* Handles switching the word on click */ function renderSwitch(param) { switch(param) { case 0: return 'Dylan Dalal'; case 1: return 'Portfolio'; default: return 'Dylan Dalal'; } } function Navbar() { var colors = ["#ff9079", "#ffc879", "#c6ff79", "#d479ff"]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; var fonts = ["Toonish", "Hit me, punk! 01", "Neon Tubes 2 Regular", "You are a TOY", "Pacifico"]; const randomFont = fonts[Math.floor(Math.random() * fonts.length)]; const StyleObj = { position: "fixed", height: "60px", fontSize: "9vw", paddingTop: "35vh", textEmphasis: '$', color: randomColor, fontFamily: randomFont, ':hover':{ color: 'black' }, }; const [click, setClick] = useState(""); const clickHandler = () => setClick((click + 1) % 2); return ( <> <nav className="page"> <div unselectable className="page-select" style={StyleObj} onClick={clickHandler}> {renderSwitch(click)} </div> </nav> </> ); } export default Radium(Navbar);