javascript - React Material UI Slider禁用颜色不更新

Question

我有一个带有 Material UI 开关和滑块的 React.js 项目。开关用于启用和禁用滑块。但是，当开关切换时，只有 Slider 的拇指区域会改变颜色。如果我使用上面的搜索栏（或单击检查器中的元素），它会正确呈现整个 Slider（如图 3 所示）。

我的开关 handleChange 函数（在导出的函数内）：

function ParamSlider(props) {

  const [state, setState] = React.useState({checked: false, value: 50});

  function handleChange() {

    ( state.checked ? 
      params[props.param] = null
    :
      params[props.param] = state.value )
    
    setState({checked:!state.checked, value:state.value})
  }
...

我的滑块：

<Slider
  color="primary"
  disabled={!state.checked}
  valueLabelDisplay="auto"
  aria-label={props.param}
  defaultValue={50}
  onChangeCommitted={(event, value) => {
    setState({checked:state.checked, value:value})
    params[props.param] = value
  }}
/>

知道为什么 Slider 没有正确重新渲染吗？

禁用：

启用：

重新渲染：

标签： javascriptreactjsmaterial-ui