使用样式化组件来设置滑块的样式 [英] Style a Slider Thumb with Styled Components

问题描述

我正在尝试使用React的样式化组件来对滑块进行样式化，但是我不知道如何对拇指进行样式化.我有一个看起来像这样的CSS:

I am trying to style a slider with styled-components for React, but I do not get how I can style the thumb. I have a CSS that looks like this:

.faderInput::-webkit-slider-thumb {
   -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border:1px solid black;
    ...
}

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

and my styled component looks like this

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

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

Does anybody know how I can port this class selector to styled-components?

推荐答案

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

I actually got help. You have to add a & and then it looks like this:

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

这篇关于使用样式化组件来设置滑块的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！