如何替换Material UI ListItem按钮中的MuiTouchRipple-child背景类？

Hey there! Glad you're loving the library—seriously, that means a lot 😊. Let's figure out how to customize that MuiTouchRipple-child background for your ListItem buttons. Here are a couple of solid approaches depending on your needs:

1. Local Customization with makeStyles (Material-UI v4) #

If you're using Material-UI v4, you can target the ripple class directly within a custom style hook and apply it to your ListItems:

import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles(() => ({
  customRippleListItem: {
    // Target the ripple child inside the ListItem button
    '& .MuiTouchRipple-child': {
      backgroundColor: 'rgba(255, 100, 100, 0.3)', // Adjust color/opacity to your liking
    },
  },
}));

export default function CustomList() {
  const classes = useStyles();

  return (
    <List component="nav">
      <ListItem 
        button 
        component="a" 
        href="#simple-list" 
        className={classes.customRippleListItem}
      >
        <ListItemText primary="Trash" secondary="Jan 9, 2014" />
      </ListItem>
      <Divider />
      <ListItem 
        button 
        component="a" 
        href="#simple-list" 
        className={classes.customRippleListItem}
      >
        <ListItemText primary="Spam" secondary="Jan 9, 2014" />
      </ListItem>
    </List>
  );
}

2. Styled Components (Material-UI v5+) #

For Material-UI v5, the styled utility is the recommended way to create customized components. Wrap ListItem to inject your ripple styles:

import { styled } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';

// Create a custom ListItem with modified ripple
const RippleCustomListItem = styled(ListItem)(() => ({
  '& .MuiTouchRipple-child': {
    backgroundColor: 'rgba(50, 200, 150, 0.2)', // Your custom background style
  },
}));

export default function CustomList() {
  return (
    <List component="nav">
      <RippleCustomListItem button component="a" href="#simple-list">
        <ListItemText primary="Trash" secondary="Jan 9, 2014" />
      </RippleCustomListItem>
      <Divider />
      <RippleCustomListItem button component="a" href="#simple-list">
        <ListItemText primary="Spam" secondary="Jan 9, 2014" />
      </RippleCustomListItem>
    </List>
  );
}

3. Global Theme Override (Change All ListItem Ripples) #

If you want every ListItem button's ripple to use this custom background, you can override it in your theme configuration:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';

const customTheme = createTheme({
  components: {
    MuiListItem: {
      styleOverrides: {
        button: {
          '& .MuiTouchRipple-child': {
            backgroundColor: 'rgba(0, 100, 255, 0.2)',
          },
        },
      },
    },
  },
});

export default function CustomList() {
  return (
    <ThemeProvider theme={customTheme}>
      <List component="nav">
        <ListItem button component="a" href="#simple-list">
          <ListItemText primary="Trash" secondary="Jan 9, 2014" />
        </ListItem>
        <Divider />
        <ListItem button component="a" href="#simple-list">
          <ListItemText primary="Spam" secondary="Jan 9, 2014" />
        </ListItem>
      </List>
    </ThemeProvider>
  );
}

Pick the approach that fits your use case—local styles for specific ListItems, styled components for reusable custom ListItems, or a global override if you want consistency across your app.

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