React中typewriter-effect组件CSS字体大小失效，如何修改？

问题出在typewriter-effect组件会生成独立的DOM结构，内部的文本容器（默认类名为.Typewriter__wrapper）自带默认字体样式，优先级高于父元素.chan的样式，导致父元素的font-size不生效。可以用以下两种方法解决：

方法一：通过CSS直接选中组件内部文本容器 #

修改你的CSS代码，直接定位到组件生成的文本元素，提升样式优先级：

.chan .Typewriter__wrapper {
    color: var(--red);
    font-weight: bold;
    font-size: 100px;
}

这样样式会直接作用于显示打字文本的元素，覆盖组件默认样式。

方法二：在打字文本中嵌入带样式的元素 #

在typeString方法里，给文本包裹一个带有内联样式的HTML标签，直接指定字体样式：

<div className='chan'>
  <Typewriter
    onInit={(typewriter) => {
      typewriter.typeString("<span style='font-size: 100px; color: var(--red); font-weight: bold;'>Aman Chauhan</span>")
               .pauseFor(1500)
               .start();
    }}
    options={{
      loop: true
    }}
  />
</div>

这种方式不需要修改外部CSS，直接通过内联样式控制文本样式，优先级最高。

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