使用样式化组件样式化滑块拇指

Question

我正在尝试使用 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;
        ...
  }
`;

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

Answer 1

我真的得到了帮助。你必须添加一个 & 然后它看起来像这样：

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

Answer 2

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

   const ScrollContainer = styled.div`
    width: 100%;
    height: 500px;
    overflow-y: auto;
    position: relative;
    &::-webkit-scrollbar {
        width: 10px;
        border: 1px solid black;
    }
`;

使用样式化组件样式化滑块拇指

Style a Slider Thumb with Styled Components

css

reactjs

styled-components