React中如何覆盖Material-UI-Next的CSS？含全局修改示例

Hey there! Let's walk through how to handle these Material-UI styling questions—they're super common once you start customizing components, so I've got you covered.

There are a few reliable methods to override Material-UI's default styles, depending on whether you want to target a single component instance or make global changes:

• Use makeStyles/useStyles hooks (recommended for component-specific overrides)
  This CSS-in-JS approach leverages specificity to override default styles. You can define custom classes and apply them directly to your components:

  import { makeStyles } from '@material-ui/core/styles';
  import ListItem from '@material-ui/core/ListItem';
  
  const useStyles = makeStyles({
    customListItemButton: {
      transition: 'background-color 300ms ease-in-out 0ms', // Your custom transition
      '&:hover': {
        backgroundColor: 'rgba(0, 0, 0, 0.08)', // Custom hover state
      },
    },
  });
  
  function MyCustomList() {
    const classes = useStyles();
    return (
      <ListItem button className={classes.customListItemButton}>
        {/* Your list item content */}
      </ListItem>
    );
  }
  

• Global customization with createTheme
  For app-wide changes to a component's default styles, use Material-UI's theme customization. This ensures every instance of the component uses your custom styles:

  import { createTheme, ThemeProvider } from '@material-ui/core/styles';
  import ListItem from '@material-ui/core/ListItem';
  
  const customTheme = createTheme({
    components: {
      MuiListItem: {
        styles: {
          button: {
            transition: 'background-color 300ms ease-in-out 0ms',
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.08)',
            },
          },
        },
      },
    },
  });
  
  function App() {
    return (
      <ThemeProvider theme={customTheme}>
        {/* Your entire app goes here—all ListItem buttons will use the custom styles */}
      </ThemeProvider>
    );
  }
  

• Global CSS file (last resort)
  If you prefer plain CSS, you can target Material-UI's base class names (avoid the dynamic numeric suffixes like -119—they change between builds). Add this to a global CSS file:

  /* global.css */
  .MuiListItem-button {
    transition: background-color 300ms ease-in-out 0ms;
    /* Use !important only if specificity issues arise—try to avoid it when possible */
    /* transition: background-color 300ms ease-in-out 0ms !important; */
  }
  

  Then import this file in your app's entry point (like index.js).

First off: don't rely on the -119 suffix—it's a dynamically generated hash that changes whenever your app builds or Material-UI updates. Instead, target the base class .MuiListItem-button for consistent results. Here are the best ways to do this globally:

• Theme customization (best practice)
  Use createTheme to update the ListItem component's default button styles across your entire app. This is the most maintainable approach:

  import { createTheme, ThemeProvider } from '@material-ui/core/styles';
  
  const theme = createTheme({
    components: {
      MuiListItem: {
        styles: {
          button: {
            transition: 'background-color 300ms ease-in-out 0ms', // Replace with your desired transition
          },
        },
      },
    },
  });
  
  function App() {
    return <ThemeProvider theme={theme}>{/* Your app content */}</ThemeProvider>;
  }
  

• Global CSS override
  If you're using a global stylesheet, target the base class without the dynamic suffix:

  /* global.css */
  .MuiListItem-button {
    transition: background-color 300ms ease-in-out 0ms;
  }
  

  Import this file in your app's root to apply the change everywhere.

内容的提问来源于stack exchange，提问作者marcelo.delta