reactjs - Firefox 上带有虚线边框的滑块

Question

我Slider在 Formik 中使用 a 作为自定义字段。我创建了自定义输入：

const DeathField: React.FC<FieldProps> = ({ field, ...props }) => {
  const { values, setFieldValue } = useFormikContext<IInitialValues>();

  const possibleDeathValues = Object.keys(values.death_prices);
  const possibleDeathWithFuneralValues = Object.keys(
    values.death_with_funeral_prices
  );

  const handleChange = (
    event: React.ChangeEvent<unknown>,
    newValue: number | number[]
  ) => {
    setFieldValue(field.name, newValue as number, true);
  };

  const marks = possibleDeathValues.map((v) => ({
    value: parseInt(v, 10),
  }));

  return (
    <Slider
      value={field.value || parseInt(possibleDeathValues[0], 10)}
      marks={marks}
      min={parseInt(possibleDeathValues[0], 10)}
      max={parseInt(possibleDeathValues[possibleDeathValues.length - 1], 10)}
      onChange={handleChange}
      step={null}
      {...props}
    />
  );
};

这使滑块很好，效果很好

当我拖动滑块时会出现问题。Firefox为其添加了虚线边框，当我释放鼠标时，它仍然显示好像焦点仍在：

即使Slider不是自定义 formik 组件也会发生相同的问题，因此这不是我的实现的问题。

如何删除此行为并复制Material-UI中默认滑块的行为？

标签： reactjsmaterial-ui