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

问题描述 投票:6回答:1

我试图为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;
        ...
  }
`;

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

css reactjs styled-components
1个回答
3
投票

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

 const FaderInput = styled.input`
 ...
 &::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 15px;
     height: 15px;
     border:1px solid black;
     ...
  }
© www.soinside.com 2019 - 2024. All rights reserved.