拖动到“更改”在设置材质 UI 滑块样式时无法进行

Question

一旦我开始从材料用户界面设置滑块组件的样式，拖动到更改值仅适用于单击，而不适用于拖动。所以我可以通过单击滑块轨道上的某处来更改值，但我无法拖动滑块来更改值。

我已经尝试过使用"样式组件"对其进行样式设置，但是出现了理智的问题。

。

   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。否则，每次道具更改时，它都会实例化一个新的Foo，因此不会反映预期的状态变化。这是代码应该改为：

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

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