如何构建自定义 material-ui 组件

Question

我必须自定义TextField组件以构建持续时间组件。

任何帮助，将不胜感激。

Answer 1

我认为简单地为您提供一个实现并不符合 SO 的精神，所以我将尝试帮助分解这个问题，并为您指出应该帮助您的文档的方向以及可行的方法为你。

看起来您需要将一些较低级别的 MUI 组件组合在一起。查看有关自定义的MUI TextField文档，您可以看到使用 的示例InputBase，您可能需要它。

这里的另一点是，TextFieldMUI 中的任何组件都将为您提供更改事件的单个值。看起来你这里有一个复合值。

function DurationField({ value, onChange }) {
  // For example, you could model the value for this field to be an array of two values.
  const [hours, minutes] = value
  return (
    // instead of div, you may need FormControl and FormControlLabel, etc.
    <div>
      <InputBase value={hours} onChange={(e) => {
        onChange([e.target.value, minutes])
      }} />
      <InputBase value={minutes} onChange={(e) => {
        onChange([hours, e.target.value])
      }} />
    </div>
  )
}

您还必须考虑焦点状态会是什么样子。用户如何使用键盘导航进入、浏览和退出此输入？这些风格是什么样的？

但从这里开始，您应该查看FormControl等等，您可以在我链接到的文档页面底部找到所有较低级别的组件TextField。通过使用这些，在需要时仔细重写样式，并精心设计 value/onChange 属性，您应该能够制作一个在 MUI 世界中运行良好的优秀组件。