如何为Material UI Slider组件components属性中的自定义组件传递额外参数

你之前的写法不生效的核心原因是：Material UI 调用components配置中传入的自定义组件时，只会传递内部生成的默认props这一个参数，不会主动传入第二个参数，因此你定义的第二个形参永远为undefined。

方案1：使用闭包直接捕获外部变量（适配你现有组件定义） #

如果你不想修改现有的ValueLabelComponent接收第二个参数的逻辑，直接在定义组件的箭头函数中引用当前作用域下的额外数据即可：

// 你的额外数据，支持动态更新
const additionalData = { unit: '℃', customTip: '自定义提示' }

<Slider
  valueLabelDisplay="auto"
  components={{
    // 直接把额外数据作为第二个参数传入，箭头函数会自动捕获外层的additionalData
    ValueLabel: (props) => ValueLabelComponent(props, additionalData),
  }}
  aria-label="custom thumb label"
  defaultValue={20}
/>

这种写法无需调整现有组件逻辑，额外数据更新时组件也会自动拿到最新值。

方案2：使用官方标准componentsProps传参（推荐） #

这是Material UI官方推荐的自定义组件传参方式，你可以调整ValueLabelComponent的逻辑，把额外数据改为从props中读取：

const additionalData = { unit: '℃', customTip: '自定义提示' }

<Slider
  valueLabelDisplay="auto"
  components={{
    ValueLabel: ValueLabelComponent,
  }}
  // 通过componentsProps给ValueLabel传递额外参数
  componentsProps={{
    valueLabel: {
      additionalData: additionalData
    }
  }}
  aria-label="custom thumb label"
  defaultValue={20}
/>

调整后你可以直接在ValueLabelComponent内部通过props.additionalData拿到额外数据，符合MUI的设计规范。

内容的提问来源于stack exchange，提问作者Sander