Material UI V5主题：如何结合断点设置defaultProps？

你当前的写法存在问题：defaultProps是组件的静态默认属性配置，无法将断点生成的媒体查询字符串作为属性键，这会被识别为无效的HTML属性，所以才会抛出Warning: Invalid attribute name: '@media (max-width:599.95px)'的错误。

要实现不同断点下的组件属性/样式变化，不能依赖defaultProps，可以用以下两种方式解决：

方案一：组件内用useMediaQuery动态切换属性 #

在组件内部通过Material UI的useMediaQuery钩子判断当前断点，动态设置属性值，同时保留外部传入props的优先级：

import { useTheme, useMediaQuery } from '@mui/material/styles';
import { Button } from '@mui/material';

const ResponsiveButton = (props) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  // 优先使用外部传入的属性，否则根据断点设置默认值
  const finalSize = props.size ?? (isMobile ? 'small' : 'medium');

  return <Button size={finalSize} {...props} />;
};

方案二：主题层面通过样式重写处理（针对样式类属性） #

如果要统一全局组件的断点样式，可以在主题的styleOverrides中结合断点媒体查询配置：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ theme }) => ({
          fontSize: theme.typography.body1.fontSize,
          // 断点下的样式调整
          [theme.breakpoints.down('sm')]: {
            fontSize: theme.typography.body2.fontSize,
            padding: theme.spacing(1, 2),
          },
        }),
      },
    },
  },
});

注：如果是组件的非样式属性（如disabled、variant），只能用方案一的动态判断方式，因为defaultProps本身不支持动态逻辑。

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