Javascript 内联-React中的webkit滑块拇指样式

我正在试图找出如何应用内联样式来更改输入[range]滑块的拇指。我不知道如何在外部css样式表中实现这一点，但如果有人知道如何使用以下代码实现这一点，那也太好了！我正在使用React和Storybook。谢谢你的帮助

Slider.js

interface ButtonProps { label?: string, background?: string, width?: string, boxshadow?: string }

const Slider = ({ label='', background='', width='', boxshadow='' }: ButtonProps) => {

  const [value, setValue] = useState(120.5);

  const onUpdate = (e) => {
     setValue(e.target.value);
  }  

  const sliderStyle = {
    ::-webkit-slider-thumb {
      background: {background},
      boxshadow: '-205px 0 0 200px {boxshadow}',
      border: '3px solid {boxshadow}'
    }
  }

  return (
    <div className="slider-box">
      <div>
        <label className="slider-label">{value}c</label>
        <p className="slider-title">{label}</p>
      </div>
      <StyledSlider
        style={{background, width}}
        list="tickmarks"
        max={1200}
        onChange={onUpdate}
        step={0.01}
        type="range"
        value={value}
      />
      <div> 
        <p className="slider-scale">1200 x 1200</p>
      </div>
    </div>
  )
}

export default {
  title: "Slider",
  component: Slider,
  argTypes: {
    background: { control: 'color' },
    control: { type: 'range', min: 100, max: 1200, step: 50 },
    boxshadow: { control: 'color' },
  },
};

export const Primary = (args) => <Slider {...args} />;

Primary.args = {
  label: 'Scale',
  background: '#e3e3e3',
  width: '300px',
  boxshadow: 'red',
};

export const StyledSlider = styled.input`
  -webkit-appearance: none;
  height: 10px;
  overflow: hidden;
  width: 300px;
  border-radius: 5px;
  outline: none;
  margin: 0 0 0 0;

  ::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 10px;
  }

  ::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: ${colors.black};
  border-radius: 50%;
  box-shadow: -205px 0 0 200px ${colors.primary500};
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 3px solid ${colors.primary500};
}
`;