如何使用样式组件更改拇指的背景？答案

【问题标题】：How do I change background for the thumb with styled components?如何使用样式组件更改拇指的背景？
【发布时间】：2020-11-27 11:37:59
【问题描述】：

我正在尝试使用react 的样式组件更改拇指的背景颜色，但我不知道如何，似乎无法得到它。我的样式组件如下所示：

 const InputVolume = styled.input`
           ::-webkit-slider-runnable-track {
                width: 100%;
                height: 4px;
                cursor: pointer;
                box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
                background-color: #FFFFFF;
                border-radius: 25px;
                border: 0px solid #000101;
            };
            &:focus::-webkit-slider-runnable-track {
                background: #D78E91;
            };
            ::-webkit-slider-thumb {
                background-color: #FFFFFF;
    }
    `;

【问题讨论】：

标签： css reactjs react-native styled-components

【解决方案1】：

警告词：MDN docs 建议不要在生产中使用它。

看起来您只是缺少设置一些 appearance: none 属性，然后添加更多属性来指定高度和宽度等内容。 Here 是下面 sn-p 的一个工作示例。

此外，您的样式中似乎有一些拼写错误。您将边框设置为 0 像素，与您的盒子阴影相同，并且边框半径只需为 2 像素，而不是 25 像素（基于高度和我假设您正在尝试使用的内容）。

const InputVolume = styled.input`
  appearance: none;
  cursor: pointer;
  ::-webkit-slider-runnable-track {
    height: 4px;
    width: 100%;
    cursor: pointer;
    pointer-events: none;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #000101;
  }
  &:focus {
    outline: none;
  }
  &:focus::-webkit-slider-runnable-track {
    background: #d78e91;
  }
  &::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    appearance: none;
    background: #fff;
    border-radius: 8px;
    margin-top: -6px;
    border: 1px solid #777;
  }
`;

【讨论】：