React中如何修改textarea文本的背景样式？

我想改React项目里textarea组件的文本背景样式，当前效果：

想要做成这样的效果：

现有组件代码：

<textarea
        id="textarea1"
        name="textarea1"
        ref={(el) => {
          refContainer.current = el;
        }}
        spellCheck="false"
        style={{
          ...color,
          padding: 16,
          resize: "none",
          textAlign: textCenter && "center",
          fontFamily: "Roboto",
          outline: "none",
          fontSize: `${fontSize}px`,
          overflowY: scrollHidden && "hidden",
          display: "flex",
          flexDirection: "column",
          width: mobile ? "calc(100% - 32px)" : "100%",
          height: "100%",
          lineHeight: "1.5",
        }}
      ></textarea>

给你两种靠谱的实现方法：

方法一：实现斑马纹行背景 #

如果要做每行交替的背景色（类似表格斑马纹），用CSS线性渐变配合行高就能实现：

修改textarea的style属性，添加以下样式：

style={{
  // 保留原有全部样式
  ...color,
  padding: 16,
  resize: "none",
  // ...其他原有样式
  // 新增行背景相关配置
  backgroundImage: "linear-gradient(#ffffcc 50%, transparent 50%)",
  backgroundSize: "100% 3em", // 3em是行高的2倍（你的行高设为1.5，1.5*2=3）
  backgroundColor: "#ffffff", // 基础底色
}}

注意：backgroundSize的第二个值必须和行高的2倍匹配，这样渐变色块才能刚好覆盖一行，透明区域对应下一行，保证对齐准确。

方法二：自定义文本高亮/区域背景 #

如果要的是文本选中后的高亮效果，或者整个文本区域的背景色，有两种实现方式：

方式1：全局CSS设置选中样式 #

在项目的CSS文件中添加这段代码：

#textarea1::selection {
  background-color: #ffffcc; /* 替换成你想要的高亮色 */
  color: #000; /* 文本颜色 */
}
#textarea1::-moz-selection {
  /* 兼容火狐浏览器 */
  background-color: #ffffcc;
  color: #000;
}

方式2：直接设置整个textarea的背景 #

如果是给整个textarea的文本区域统一加背景，直接在style里新增一行：

style={{
  // 保留原有样式
  backgroundColor: "#ffffcc", // 替换成目标背景色
}}

注意事项 #

如果你的...color对象中包含backgroundColor属性，会覆盖你新增的背景样式，要么调整color对象里的属性，要么把自定义的背景样式写在...color之后。

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