NextUIのTextareaを使用した際に出てくるscrollBarのスタイリングを変更すること。
<Textarea
value={text}
onKeyDown={handleKeyDown}
onChange={(e) => setText(e.target.value)}
placeholder={placeholder}
className={`w-full resize-none ${styles.scrollbar}`}
style={{outline: 'none', backgroundColor: 'transparent', color: 'white'}}
rows={1}
minRows={1}
maxRows={13}
/>
.scrollbar::-webkit-scrollbar {
width: 5px;
}
.scrollbar::-webkit-scrollbar-track {
background: #d52e2e;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #888888;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #ab0000;
}
以上のようなコードで、scrollBarにスタイリングが効きません
どのようにすればスタイリングが効きますか？
Node.js - v20.10.0
next - v14.0.4
react - v18
@nextui-org/react - v2.2.9
このように試してみることができます
クラス名と疑似クラスの間にスペースを追加してみました。
.scrollbar ::-webkit-scrollbar {
width: 5px;
}
.scrollbar ::-webkit-scrollbar-track {
background: #d52e2e;
}
.scrollbar ::-webkit-scrollbar-thumb {
background: #888888;
}
.scrollbar ::-webkit-scrollbar-thumb:hover {
background: #ab0000;
}