看似简单的问题：

1. 示例背景：我们有许多项目列表，并使用<List>.
2. 示例问题：我们通常（但并非总是）希望删除注入的额外填充<List>（例如<UnpaddedList>：）。

作为另一个例子，也许我们希望大多数列表默认可折叠，并且<List onClick={...}>触发器变为<CollapsableList>。对于下面的大多数示例，未填充的内容足以说明。

初步猜测，我期望类似的内容CustomList extends List（但请参阅 Facebook 继承建议）。有很多方法可以做到这一点，但是优点/缺点是什么......它们似乎是冲突的：

createStyled()

这是为了完全取代主题......在旨在打破品牌标准的时代。尽管我们可以返回并合并现有主题，但这似乎违背了该工具的目的，并且deepmerge可能会降低性能？如果它可以继承当前的主题上下文，那么这将很有效。也许很多额外的组件名称是不好的做法？例如：List、UnpaddedList UnpaddedLargeList、UnpaddedLargeGreenList等

请参阅https://mui.com/system/styled/#create-custom-styled-utility

createTheme()

这允许完全覆盖每个组件的样式和道具。唯一的问题是，可能不清楚为什么组件会以某种方式设置样式并保留其名称。（例如：<List>未重命名为<UnpaddedList>）如果您有一个组件从树中某处的父组件继承主题并以意外的样式显示，这可能会令人困惑。开发人员必须跟踪每个父组件才能找到主题注入的位置<ThemeProvider>。但也许这种以意想不到的方式注入子主题本身就是反模式。

此外，如果没有明确的文档/打字稿，需要进行大量阅读才能确定如何最好地传递和修改当前主题：

function extendThemeWithGreen(theme: Theme) {
  let themeOptions: ThemeOptions = { palette: { primary: { main: "green" } } };
  return createTheme(theme, themeOptions);
}

function Example() {
  return <ThemeProvider theme={extendThemeWithGreen}> example</ThemeProvider>;
} …