0

我正在开发一个个人网站，其中包含随机样式的标题文本。它目前只是随机化字体和颜色（尽管我计划添加更多），我通过从预定义的字符串列表中选择一个值来实现这一点。由于随机化需要在 JavaScript 中进行，所有样式都是通过 React 内联样式（在一个名为 StyleObj 的 const 中）完成的。为了进一步自定义我的文本，我安装了 Radium 库，它允许我使用 CSS :hover 选择器。我的问题来自这样一个事实，显然， :hover 选择器是以某种方式实现的，它强制重新编译我的 StyleObj 并因此重新绘制随机字体和颜色。

另外，呃，颜色和字体是临时的。哈哈

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

0 回答 0