基于断点覆盖MUI默认主题间距的问题求助

你写的spacing不是有效的CSS属性，也不是MUI Paper组件能识别的样式属性，所以设置了也不会生效。而color是标准CSS属性，所以能正常覆盖。

方法1：针对单个组件设置间距（推荐） #

用MUI主题提供的theme.spacing()工具，把数值转换成标准间距单位，然后应用到padding/margin这类实际控制间距的CSS属性上：

const Styled = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(5), // 桌面端用5倍基础间距
  color: '#ff0099',
  [theme.breakpoints.down('md')]: {
    padding: theme.spacing(3), // 移动端缩小到3倍基础间距
    color: '#9900ff',
  },
}))

注：MUI默认基础间距是4px，theme.spacing(5)就是20px，你也可以直接写具体像素值，比如padding: '50px'。

方法2：全局缩小移动端所有组件间距 #

如果想让整个项目的移动端间距都缩小，可以自定义主题，修改间距计算规则：

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

const theme = createTheme({
  spacing: (factor) => {
    // 判断当前是否为移动端（md断点以下）
    const isMobile = typeof window !== 'undefined' && window.innerWidth < 900;
    // 移动端用更小的基础单位，桌面端保持默认
    return `${isMobile ? 0.25 * factor : 0.5 * factor}rem`;
  },
});

// 在根组件用ThemeProvider包裹整个应用
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的所有页面/组件 */}
    </ThemeProvider>
  );
}

这样所有用到theme.spacing()的地方，移动端都会自动使用缩小后的间距。

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