我正在尝试使用样式组件为 React 设置滑块样式，但我不知道如何设置拇指样式。我有一个看起来像这样的 CSS：
.faderInput::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}
我的样式组件看起来像这样
const FaderInput = styled.input`
...
::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}
`;
有人知道如何将此类选择器移植到样式组件吗？
我实际上得到了帮助。你必须添加一个 & 然后它看起来像这样：
const FaderInput = styled.input`
...
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}
这在 Chrome 和 Safari 中对我来说效果很好。对于 FF 你必须使用这个 FF 滚动条
const ScrollContainer = styled.div`
width: 100%;
height: 500px;
overflow-y: auto;
position: relative;
&::-webkit-scrollbar {
width: 10px;
border: 1px solid black;
}
`;