如何将React模块样式传递给typeit-react函数？

为啥原来的写法不行？ #

typeit-react的.type()方法只认纯HTML字符串，不认React的JSX语法。你写的className={styles.myReactClass}是JSX写法，会被直接当成普通文本塞进DOM里，根本不会被解析成CSS模块生成的哈希类名（比如myReactClass_abc123）。而class="myClass"是标准HTML语法，所以能正常生效。

正确写法 #

把CSS模块导出的类名直接拼进HTML字符串里，用模板字符串嵌入变量即可：

import TypeIt from "typeit-react";
import styles from "./index.module.css";

<TypeIt
    getBeforeInit={(instance) => {
        instance
            .type('<span class="myClass">Hello World!</span>')
            .pause(750)
            // 用模板字符串插入CSS模块的真实类名，注意用class属性而非className
            .type(`<span class="${styles.myReactClass}">Hello World!</span>`)
        return instance;
    }}
/>;

这样styles.myReactClass会自动替换成CSS模块生成的哈希类名，最终就能正常渲染带样式的元素了。

内容的提问来源于stack exchange，提问作者m19v