如何在Chakra UI元素中添加::-webkit-scrollbar伪元素？ （反应）

Question

我正在使用 Chakra UI，我需要使用 css 伪元素 ::-webkit-scrollbar 自定义滚动条样式，但看不到 Chakra UI拥有这个伪元素和一个我不知道在哪里可以设置这个特定组件的样式而不创建全局 css class.

这是我的代码示例：

<Box
  overflowX="auto"
  maxW="100vw"
  h="100%"
  whiteSpace="nowrap"
  pb="17px"
  color="white"
  px="32px"
  // the ::-webkit-scrollbar property should goes here
>
  <!-- content -->
</Box>

Answer 1

尝试 css 道具：

<Box
  overflowY="auto"
  css={{
    '&::-webkit-scrollbar': {
      width: '4px',
    },
    '&::-webkit-scrollbar-track': {
      width: '6px',
    },
    '&::-webkit-scrollbar-thumb': {
      background: scrollbarColor,
      borderRadius: '24px',
    },
  }}
>