如何替换 MaterialUI 组件中的组件？答案

【问题标题】：How to replace a component in a MaterialUI component?如何替换 MaterialUI 组件中的组件？
【发布时间】：2021-12-29 13:39:45
【问题描述】：

MaterialUI 具有样式功能，但也可以通过替换子组件来自定义组件。

例如，<Slider> 上的 MaterialUI 文档链接到 CodeSandbox，其中 <Thumb> 组件被换出。

但我并不清楚这里发生了什么，我找不到任何文档、示例或教程来说明如何为其他组件执行此操作。

例如，当我想替换<Track> 组件时，我应该如何进行？明确地说，我知道如何换出一个组件（这很明显是 <Thumb> 组件，但我觉得我缺少关于替换它的文档。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Slider 有一个 components 属性。具体来说：

components?: {
  Root?: React.ElementType;
  Track?: React.ElementType;
  Rail?: React.ElementType;
  Thumb?: React.ElementType;
  Mark?: React.ElementType;
  MarkLabel?: React.ElementType;
  ValueLabel?: React.ElementType;
};

示例中的 Airbnb 组件具有 components={{ Thumb: AirbnbThumbComponent }}。如果您想更换 Track，您需要做的就是：

function MyCustomTrackComponent() {
  /* ... */
}

<Slider components={{ Track: MyCustomTrackComponent }} />

【讨论】：

我已经做到了这一点，但完全不清楚用什么来替换组件。我们需要接受哪些道具，我们应该如何处理它们？我们可以访问哪些数据？我期待替代组件的 API 文档。
@Plumpie 不幸的是，MUI 文档只记录了“可用”组件的 API，而不是其他组件的“发条”。如果你想定制其中之一，你需要在他们的仓库中查看implementation page。第 139 行是轨道。这只是一个使用他们的情感 API 设计的 span 元素。