reactjs - 当material-ui slider 被设置样式时，拖动以更改是不可能的

Question

一旦我开始从 Material UI 设计 slider 组件的样式，“拖动到更改值”仅适用于单击，但不适用于拖动。因此，我可以通过单击 slider 轨道上的某处来更改值，但无法拖动 slider 来更改值。

我已经尝试使用“样式组件”对其进行样式设置，但出现了正常的问题。

...

   thumb: {
     height: 35,
     width: 35,
     border: '1px solid var(--grey)',
     boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
     backgroundColor: 'var(--light-font)',
   },
   track: {
     backgroundColor: 'var(--primary-color)',
     height: 3,
     borderBottom: '1px solid grey',
   },
   trackAfter: {
     backgroundColor: 'var(--bg-grey)',
   },
 })(Slider)

 return (
   <>
     <h6>Weekly Goal: {weeklyGoal[page]}hr</h6>
     <StyledSlider
       style={{ touchAction: 'none' }}
       type="range"
       min={0}
       max={20}
       step={1}
       value={weeklyGoal[page]}
       onChange={handleGoalChange}
     />
   </>
 )
}

Answer 1

我很惊讶没有人回答这个问题，因为这可能是一个常见的错误。以下是我认为正在发生的事情:

您(我们)似乎试图将 withStyles HOC 包装在另一个 HOC 中，例如:

const styled = (component) => props => {
  const Foo = withStyles({})(component);
  return <Foo {...props} />
}

错误在于将 styled 视为 HOC，而它只应返回 withStyles() 的结果，即上例中的 Foo。否则每次 props 改变时它都会实例化一个新的 Foo ，因此不能反射(reflect)预期的状态变化。代码应该是这样的:

const styled = (component) => {
  const Foo = withStyles({})(component);
  return Foo;
}

在您的情况下，您应该仅返回 StyledSlider (而不是 JSX)，然后使用它并在需要时将 Prop 传递给它。