web-dev-qa-db-ja.com

スタイル付きコンポーネントを使用してスライダーサムをスタイリングする

Reactのstyled-componentsを使用してスライダーのスタイルを設定しようとしていますが、サムのスタイルを設定する方法がわかりません。私は次のような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;
        ...
  }
`;

このクラスセレクターをstyled-componentsに移植する方法を知っている人はいますか？

cssreactjsstyled-components
9
Simons0n

私は実際に助けを得ました。 ＆を追加する必要があり、次のようになります。

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