如何移除MUI中所有按钮的阴影？自定义主题下Contained按钮阴影移除方案

Hey there! Let’s sort out that button shadow problem you’re facing with Material UI. I totally get why setting boxShadow: 0 directly on individual buttons didn’t work—MUI’s theme-level styling takes priority over inline props in most cases, so we need to adjust the theme itself to make this change stick globally.

Option 1: Remove Shadow from All Buttons Globally #

If you want every button (regardless of variant) to have no shadow, customize your theme by overriding the MuiButton component’s root styles:

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

const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          // Base state shadow removal
          boxShadow: 'none',
          // Remove shadow on hover, active, and focus states too
          '&:hover': { boxShadow: 'none' },
          '&:active': { boxShadow: 'none' },
          '&:focus': { boxShadow: 'none' }
        }
      }
    }
  }
});

// Wrap your app with the ThemeProvider to apply the theme
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button variant="contained">No Shadow Contained Button</Button>
      <Button variant="outlined">No Shadow Outlined Button</Button>
      <Button variant="text">No Shadow Text Button</Button>
    </ThemeProvider>
  );
}

Option 2: Remove Shadow Only from Contained Buttons #

If you want to keep shadows on other button variants (like outlined/text) but target just contained buttons, use theme variants to narrow down the styling:

const customTheme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'contained' },
          style: {
            boxShadow: 'none',
            '&:hover': { boxShadow: 'none' },
            '&:active': { boxShadow: 'none' },
            '&:focus': { boxShadow: 'none' }
          }
        }
      ]
    }
  }
});

Why Your Initial Approach Didn’t Work #

MUI injects component styles from the theme with higher specificity than inline style props or basic sx rules. By modifying the theme directly, you’re updating the base styles that all buttons inherit, so the change applies consistently everywhere.

If you ever need to re-add shadow to a single button, you can override the theme with the sx prop:

<Button variant="contained" sx={{ boxShadow: 3, '&:hover': { boxShadow: 6 } }}>
  Button With Shadow
</Button>

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