如何使用ReactJS + Chakra UI自定义滚动条样式？

核心问题排查与修复 #

1. 确保容器具备滚动条件
   自定义滚动条样式生效的前提是容器能触发滚动条：必须给容器设置固定高度/最大高度，同时配置overflowY: 'auto'（或overflow: 'auto'），否则滚动条不会出现，样式自然无法生效。

2. 匹配Chakra UI版本的样式属性

   • Chakra UI v2及以上版本：推荐使用css或sx属性，而非__css（__css是v1版本的写法）。
   • v1版本：保留__css属性即可，但同样要确保容器的滚动配置正确。

正确代码示例 #

基础webkit浏览器适配（Chrome/Edge/Safari） #

import { Box } from '@chakra-ui/react';

<Box
  height="300px" // 必须设置固定高度，触发滚动
  overflowY="auto"
  css={{
    '&::-webkit-scrollbar': {
      width: '2px',
    },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.0)',
      width: '2px',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0,0,0,.1)',
      outline: '1px solid slategrey',
      borderRadius: '24px',
    },
  }}
>
  {/* 插入需要滚动的长内容 */}
</Box>

兼容Firefox浏览器 #

如果需要适配Firefox，可添加scrollbar-width和scrollbar-color属性：

css={{
  scrollbarWidth: 'thin',
  scrollbarColor: 'rgba(0,0,0,.1) transparent',
  // 以下是webkit专属样式
  '&::-webkit-scrollbar': {
    width: '2px',
  },
  '&::-webkit-scrollbar-track': {
    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.0)',
    width: '2px',
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0,0,0,.1)',
    outline: '1px solid slategrey',
    borderRadius: '24px',
  },
}}

使用sx属性的写法 #

<Box
  height="300px"
  overflowY="auto"
  sx={{
    '&::-webkit-scrollbar': { width: '2px' },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.0)',
      width: '2px'
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0,0,0,.1)',
      outline: '1px solid slategrey',
      borderRadius: '24px'
    }
  }}
>
  {/* 滚动内容 */}
</Box>

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