Style a Slider Thumb with Styled Components

Question

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?

Answer 1

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;
     ...
  }

Answer 2

This is what works well for me in Chrome and Safari. For FF you have to use this FF scrollbar

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