使用样式组件设置滑块拇指的样式

时间:2017-12-21 09:09:00

标签: css reactjs styled-components

我正在尝试为React设置带有样式组件的滑块,但我不知道如何设置拇指的样式。我有一个看起来像这样的CSS:

Tests

我的样式组件看起来像这样

CCleaner

有人知道如何将这个类选择器移植到样式组件吗?

2 个答案:

答案 0 :(得分:3)

我实际上得到了帮助。你必须添加&然后它看起来像这样:

 const FaderInput = styled.input`
 ...
 &::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 15px;
     height: 15px;
     border:1px solid black;
     ...
  }

答案 1 :(得分:1)

这对我来说在 Chrome 和 Safari 中效果很好。对于 FF 你必须使用这个 FF scrollbar

View -> Appearance -> Toolbar