React Radium Library CSS :hover selector changes previously chosen random base text color-CodePudding

I'm working on a personal website that features randomly styled text for the header. It's currently only randomizing the font and the color (though I plan to add more) and I'm achieving this by choosing a value out of a predefined list of strings. Since the randomization needs to occur in JavaScript, all of the styling is done through React inline styling (in a const called StyleObj). To further customize my text, I've installed the Radium library, which allows me to use the CSS :hover selector. My problem comes from the fact that, apparently, the :hover selector is implemented in some sort of way that forces a recompile of my StyleObj and thus re-draws a random font and color. Is there anything I can do to keep the previously assigned color/font after a hover is over while preserving my goal of randomly assigning font and color on click?

Also, uh, colors and fonts are temporary. lol

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);

CodePudding user response：