无法通过常规方法覆盖MUI Toolbar左右内边距，仅!important生效

你遇到的核心问题是：Toolbar的默认24px左右内边距，是由gutters样式类控制的，而非你之前尝试覆盖的root类，这也是常规样式方法失效、必须用!important的原因。以下是针对性的解决方案：

1. 主题配置中覆盖gutters类 #

修改你的MUI主题配置，把样式覆盖目标从root换成gutters：

components: {
  MuiToolbar: {
    styleOverrides: {
      gutters: {
        paddingLeft: '0',
        paddingRight: '0',
        // 如需保留特定断点的内边距，可添加媒体查询
        '@media (min-width: 600px)': {
          paddingLeft: '0',
          paddingRight: '0',
        },
      },
    },
  },
}

2. 使用styled组件覆盖 #

通过styled组件直接定位gutters类，确保样式特异性足够：

const StyledToolbar = styled(Toolbar)<ToolbarProps>(() => ({
  '&.MuiToolbar-gutters': {
    padding: '40px 114px',
  },
}))

或者结合MUI主题的断点配置，处理响应式场景：

const StyledToolbar = styled(Toolbar)<ToolbarProps>(({ theme }) => ({
  padding: '40px 114px',
  [theme.breakpoints.up('sm')]: {
    padding: '40px 114px',
  },
}))

3. 用sx属性直接修改 #

sx属性本身优先级较高，直接指定样式即可，或者明确覆盖gutters类：

// 方式一：直接设置padding
<Toolbar sx={{ padding: '40px 114px' }}>
  {/* 组件内容 */}
</Toolbar>

// 方式二：精准覆盖gutters类
<Toolbar
  sx={{
    '&.MuiToolbar-gutters': {
      paddingLeft: 0,
      paddingRight: 0,
    },
  }}
>
  {/* 组件内容 */}
</Toolbar>

额外优化方案 #

如果完全不需要Toolbar的内边距，直接使用官方提供的disableGutters属性即可，无需手动覆盖样式：

<Toolbar disableGutters>
  {/* 组件内容 */}
</Toolbar>

排查要点 #

• 确认ThemeProvider在Next.js 14的layout.tsx中全局包裹了应用，确保自定义主题能正确作用到所有组件。
• 检查是否有全局CSS（如globals.css）或第三方样式库的高特异性选择器，覆盖了Toolbar的样式。

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