React Typewriter组件问题：‘Hey, I'm Adam’不显示竖线|

可能原因 #

• 样式优先级冲突：styles.title中的CSS规则（比如overflow: hidden、line-height或文本颜色设置）可能覆盖了Typewriter组件的光标样式，导致光标被隐藏或颜色与背景一致。
• 未显式指定光标配置：Typewriter组件在不同父元素下可能默认行为有差异，需要手动开启光标显示。

解决步骤 #

1. 检查并调整父元素样式 #

查看Hero.module.css中的.title类，确认是否存在以下可能影响光标的规则：

.title {
  /* 避免这些可能隐藏光标的属性 */
  overflow: hidden;
  /* 或者颜色设置导致光标不可见 */
  color: #fff; /* 如果光标默认颜色也是白色就会看不到 */
}

如果有类似规则，修改为：

.title {
  overflow: visible; /* 确保光标不被截断 */
  /* 若颜色冲突，可单独给光标设置颜色 */
}

2. 显式配置Typewriter的光标参数 #

在h1中的Typewriter组件里，添加options属性，强制开启光标并设置样式：

<Typewriter
  options={{
    cursor: "|",
    cursorColor: "#000", // 设置与h1文本对比明显的颜色
    loop: false
  }}
  onInit={(typewriter) => {
    typewriter.typeString("Hey, I'm Adam").pauseFor(3000).start();
  }} 
/>

3. 强制提升光标样式优先级 #

如果样式冲突依然存在，可在全局CSS或模块CSS中添加针对Typewriter光标的样式：

/* Hero.module.css */
.title .Typewriter__cursor {
  display: inline-block !important;
  color: inherit !important; /* 或指定颜色 */
}

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