gpt4 book ai didi

html - 如何在 Chakra UI 元素中添加::-webkit-scrollbar 伪元素? ( react )

转载 作者:行者123 更新时间:2023-12-04 14:39:34 25 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

试试 css Prop :

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

关于html - 如何在 Chakra UI 元素中添加::-webkit-scrollbar 伪元素? ( react ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65042380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com