NextUIのスタイリングがうまく行かない
Q&A
Closed
解決したいこと
NextUIのTextareaを使用した際に出てくるscrollBarのスタイリングを変更すること。
現状のコード
Next.js
<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}
/>
styls.module.css
.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
0
