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

【问题标题】：How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)如何在 Chakra UI 元素中添加 ::-webkit-scrollbar 伪元素？（反应）
【发布时间】：2021-03-10 12:49:06
【问题描述】：

我正在使用 Chakra UI，我需要使用 css 伪元素 ::-webkit-scrollbar 自定义滚动条样式，但是 Chakra UI 没有看到这个伪元素，我不知道我可以在哪里设置样式此特定组件无需创建全局 css 类。

这是我的代码示例：

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

【问题讨论】：

标签： html css reactjs chakra-ui

【解决方案1】：

试试 css 属性：

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

【讨论】：

你知道怎么加::-webkit-scrollbar-thumb:horizontal吗，不知道chakra在内部为伪css使用了什么规则。
谢谢！刚刚有帮助！