MUI中自定义样式组件的最优实现方式及各方案优缺点对比

最优方案推荐（按适用场景排序） #

1. 组件包裹（通用首选，符合官方组合优先的设计原则） #

就是你提到的return <List {...props} />方案，你遇到的问题都有成熟的解决方式：

• 类型定义：直接使用原生组件的Props类型即可，配合forwardRef透传ref，完全保留原生组件的类型提示和能力：

import { List, ListProps } from '@mui/material';
import React from 'react';

const UnpaddedList = React.forwardRef<HTMLUListElement, ListProps>(
  (props, ref) => {
    const { sx = {}, ...rest } = props;
    return (
      <List
        ref={ref}
        disablePadding
        sx={{
          // 覆盖ListItem硬编码的空白符，在该组件范围内生效
          '& .MuiListItem-root': {
            paddingLeft: 0,
            paddingRight: 0,
          },
          // 用户传入的sx优先级更高，MUI原生支持自动合并，无需手动deepmerge
          ...sx,
        }}
        {...rest}
      />
    );
  }
);

UnpaddedList.displayName = 'UnpaddedList';

如果需要组合多个特性（比如无内边距+可折叠），可以单独封装对应逻辑的组件，或者直接在封装组件里加自定义属性：

type CollapsibleListProps = ListProps & {
  defaultOpen?: boolean;
};

const CollapsibleList = React.forwardRef<HTMLUListElement, CollapsibleListProps>(
  ({ defaultOpen = true, children, ...props }, ref) => {
    const [open, setOpen] = React.useState(defaultOpen);
    return (
      <>
        <List
          ref={ref}
          onClick={() => setOpen((prev) => !prev)}
          {...props}
        />
        {open && children}
      </>
    );
  }
);

2. 扩展variant + 自定义属性（全项目统一规范首选） #

你提到的variant无法组合的问题可以通过同时扩展variant和布尔属性解决，还支持全局类型提示：

1. 首先扩展TypeScript类型定义：

declare module '@mui/material/List' {
  interface ListPropsVariantOverrides {
    unpadded: true;
  }
  interface ListProps {
    collapsible?: boolean;
  }
}

2. 在全局主题中配置对应样式和默认行为：

const theme = createTheme({
  components: {
    MuiList: {
      variants: [
        {
          props: { variant: 'unpadded' },
          style: {
            padding: 0,
            '& .MuiListItem-root': {
              paddingLeft: 0,
              paddingRight: 0,
            },
          },
        },
        {
          props: { collapsible: true },
          style: {
            cursor: 'pointer',
          },
        },
      ],
    },
    // 全局覆盖ListItem硬编码的空白符，无需每个组件单独写，不会导致包体积膨胀
    MuiListItem: {
      styleOverrides: {
        root: {
          paddingLeft: 16,
          paddingRight: 16,
        },
      },
    },
  },
});

使用时可以自由组合特性：<List variant="unpadded" collapsible />，没有冲突，类型安全。

3. sx属性（一次性自定义场景） #

仅用于单次出现的特殊样式需求，MUI的sx属性本身是类型安全的，所有样式键都绑定了主题类型，不存在兼容性破裂风险，只有直接写原生style属性才会有该问题。

不推荐方案说明 #

• createStyled：仅适合完全脱离现有主题的自定义组件，常规业务复用会导致组件碎片化，属于过度设计
• 局部ThemeProvider注入主题：会导致样式隐式依赖，排查问题成本极高，仅适合全局统一配置使用
• 无样式组件、Box包裹：和直接包裹原生List没有本质区别，还会增加额外的组件层级，属于冗余写法
• 重复写原生props：违反DRY原则，无法统一规范，维护成本高

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