React自定义滚动条样式不生效问题求助

核心问题1：React内联样式不支持伪元素 #

你把::-webkit-scrollbar这类伪元素样式写在wrapper的内联style对象里了，但React的内联样式不支持CSS伪元素和伪类，这些样式根本不会被解析，所以滚动条没变化。

核心问题2：滚动条归属搞错了 #

你当前的滚动条是属于<textarea>的（因为你给textarea加了overflowY: auto），而不是外层的wrapper。就算wrapper的滚动条样式能生效，也影响不到textarea的滚动条。

解决办法（二选一） #

方法1：给textarea加自定义滚动条样式

1. 在单独的CSS文件（比如SendMessageUser.css）里写滚动条样式：

.custom-textarea::-webkit-scrollbar {
  width: 20px;
}
.custom-textarea::-webkit-scrollbar-track {
  background-color: transparent;
}
.custom-textarea::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
.custom-textarea::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

2. 在组件里给textarea加上这个类名：

<textarea 
  className="custom-textarea"
  spellcheck="false" 
  data-gramm="false" 
  data-gramm_editor="false" 
  data-enable-grammarly="false" 
  style={styles.textArea}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, ipsum in hendrerit laoreet, ligula ipsum commodo nisl, eu commodo est nulla quis dolor.
</textarea>

方法2：让wrapper负责滚动

1. 同样在CSS文件里写wrapper的滚动条样式：

.scroll-wrapper::-webkit-scrollbar {
  width: 20px;
}
.scroll-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

2. 修改组件里的样式和结构：
   • 给wrapper加上overflowY: auto，并添加类名
   • 去掉textarea的overflowY: auto，让它自适应高度

// 修改styles里的textArea
textArea: {
  height: "auto", 
  minHeight: "100%", 
  width: "100%", 
  backgroundColor: "#fff", 
  resize: "none", 
  border: "none", 
  outline: "none", 
  padding: "10px 25px 10px 10px", 
  fontSize: "15px",
}

// 修改wrapper的渲染
<div className="scroll-wrapper" style={{ ...styles.wrapper, overflowY: 'auto' }}>
  <textarea spellcheck="false" ... style={styles.textArea}>...</textarea>
</div>

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