React TypeScript中实现打字机效果遇阻，内联样式配置无效求助

问题根源分析 #

1. 内联样式局限性：React内联样式无法定义:after伪元素和@keyframes动画，这类CSS特性必须在类样式中声明。
2. DOM操作时机错误：组件函数顶层直接调用document.getElementById会返回null，此时组件还未渲染到DOM中，需在组件挂载后执行DOM操作。
3. 选择器与属性错误：
   • 原选择器"typewriter-effect > text"与实际组件的className="text"不匹配，应改为.typewriter-effect > .text；
   • React元素需用className替代原生class属性；
   • @keyframes语法错误，多个关键帧需单独声明样式块。

修正后的代码实现 #

import React, { useEffect, useRef } from 'react';
import { styled } from '@mui/material/styles';
import { Box } from '@mui/material';

// 用MUI styled创建支持完整CSS特性的容器组件
const TypewriterContainer = styled(Box)`
  display: flex;
  justify-content: center;
  font-family: monospace;

  & > .text {
    max-width: 0;
    animation: typing 3s steps(var(--characters)) infinite;
    white-space: nowrap;
    overflow: hidden;
  }

  &:after {
    content: " |";
    animation: blink 1s infinite step-end;
  }

  @keyframes typing {
    75%, 100% {
      max-width: calc(var(--characters) * 1ch);
    }
  }

  @keyframes blink {
    0%, 75%, 100% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
  }
`;

function Typewriter() {
  const textRef = useRef<HTMLDivElement>(null);
  const text = 'Lorem ipsum dolor sit amet.';

  // 组件挂载后执行DOM操作
  useEffect(() => {
    if (textRef.current) {
      textRef.current.textContent = text;
      textRef.current.style.setProperty('--characters', text.length.toString());
    }
  }, [text]);

  return (
    <TypewriterContainer>
      <Box className="text" ref={textRef}></Box>
    </TypewriterContainer>
  );
}

export { Typewriter };

关键优化点 #

• 使用MUI的styled方案，完整支持CSS伪元素、动画等高级特性；
• 用useRef获取DOM元素，符合React数据流规范，替代直接操作document；
• 在useEffect中执行文本赋值和CSS变量设置，确保DOM已完成挂载；
• 修正@keyframes语法错误，保证动画逻辑正常运行。

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