React中用样式对象设置scrollbar-width: thin不生效该如何解决？

• scrollbar-width 属于较新的CSS滚动条规范属性，当前React版本的内联样式转换逻辑尚未支持该属性的小驼峰映射，你写的scrollbarWidth: "thin"不会被正确渲染到DOM元素的style属性上，所以没有效果。
• Chrome、Edge等webkit内核浏览器默认不识别标准的scrollbar-width属性，需要配合::-webkit-scrollbar系列伪元素才能实现细滚动条效果，而伪元素无法通过React内联样式设置。

方案1：直接操作DOM（适合无法使用类样式/外部CSS的场景） #

通过ref获取真实DOM元素后直接操作原生style对象，避开React内联样式的转换限制，支持标准属性的浏览器（如火狐）可直接生效：

import { useRef, useEffect } from 'react';

const styles = {
  module: {
    height: "30rem",
    overflowY: "scroll",
  },
}

const YourComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.style.scrollbarWidth = 'thin';
      // 可选：设置滚动条颜色，格式为 滑块颜色 轨道颜色
      scrollRef.current.style.scrollbarColor = '#999 #f5f5f5';
    }
  }, []);

  return <div ref={scrollRef} style={styles.module}>滚动区域内容</div>
}

方案2：全局CSS实现全浏览器兼容 #

如果允许添加全局CSS，添加以下样式后给滚动元素加对应类名即可兼容所有主流浏览器：

/* 全局CSS文件中添加 */
.thin-scroll {
  height: 30rem;
  overflow-y: scroll;
  /* 标准属性，火狐生效 */
  scrollbar-width: thin;
  scrollbar-color: #999 #f5f5f5;
}
/* webkit内核浏览器（Chrome、Edge、Safari）兼容 */
.thin-scroll::-webkit-scrollbar {
  width: 6px;
}
.thin-scroll::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 3px;
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
  background: #666;
}

组件内使用：

const YourComponent = () => {
  return <div className="thin-scroll">滚动区域内容</div>
}

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