reactjs - 如何最好地在 MUI 中创建自定义样式的组件

Question

看似简单的问题：

1. 示例背景：我们有许多项目列表，并在 UI 中使用<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>;
}

另一个问题是某些组件中注入了任意空白。这没有记录，也没有类型提示。发现这些的唯一方法是寻找源代码。从那里您可能必须创建另一组样式来覆盖原生样式并将膨胀引入应用程序。

见https://mui.com/system/styled/#custom-components 见https://mui.com/customization/how-to-customize/#2-reusable-style-overrides

return <List {...props} />

包装组件会很好。（例如：）const UnpaddedList = (props) => <List disablePadding {...props} />;到目前为止，这一直很麻烦。例如，道具应该是ListProps还是OverridableComponent<ListTypeMap<{}, "ul">>？或者假设最终组件和包装组件都有sx......我是否必须设置 adeepMerge来处理重复的道具。也许我只是需要花更多的时间来让它继续下去？

见https://mui.com/guides/composition/#wrapping-components

sx={...}或style={...}或class=...

这些道具通常允许定制，但它们实际上是一次性的。例如：您还必须这样做<List style={{padding:0}} />，这会失去类型安全性（预计将来会出现问题） class可以分开，但仍然很难保持类型安全性。遗产makeStyles(是相似的

见https://mui.com/system/the-sx-prop/ 见https://mui.com/styles/api/#createstyles-styles-styles

<UnstyledList component={...}

这在很大程度上是一个即将推出的功能，尚未完全实施。虽然这可以避免未来的 css 冲突，但它仍然不利于props覆盖（或者如果它确实......从文档中不清楚）

见https://mui.com/customization/unstyled-components/#main-content

<Box component={List} ... />

使用Box包装器创建自定义组件。文档对此并不完全清楚。它可能是这样的：

function UnpaddedList(props: ListProps){
  return <Box component={List} disablePadding {...props} />
}

许多组件道具具有通用修饰符...但是尚不清楚如何编写此新组件以匹配（或扩展）原始组件道具

见https://mui.com/system/box/#overriding-mui-components

variant="unpadded"

这很接近，但它似乎会产生打字问题或特殊处理导入。我可以看到这会在路上造成混乱，但如果没有正确实施，至少 linting 会发出警告。它没有很好的组合方式。对于没有内置变体的组件，如何做到这一点也不清楚。

见https://mui.com/customization/theme-components/#adding-new-component-variants

props

当然，有些（但不是全部）可以通过 props keep type safety 来完成。（例如：）<List disablePadding={true}>但是这不是 DRY。总体上管理起来更糟糕（没有品牌标准）。它还使代码更难阅读并且过于冗长

其他方法？

也许我错过了另一种方式。我也找不到任何优雅的解决方案来解决MUI 组件中的硬编码空格

标签： reactjsmaterial-ui

Answer 1

如果您有一个在多个地方使用的组件，并且其中只有一个需要具有一些特殊样式，或者您需要调整或修复特定布局中的边缘情况，请使用sxprop. 它适用于这样的一次性样式：

<List sx={{ p: 0 }}>

如果您需要偶尔在组件中应用一些样式，请使用styled. 例如，如果一个组件在 100 个地方使用但仅在 20 个地方使用，则需要禁用填充，然后添加一个填充道具以在极少数情况下启用样式：

const options = {
  shouldForwardProp: (prop) => prop !== 'disablePadding',
};
const List = styled(
  MuiList,
  options,
)(({ theme, disablePadding = false }) => ({
  ...(disablePadding && {
    padding: 0,
  }),
}));

// I dont always use disablePadding but sometimes I need it
<List disablePadding>