How do you set the ripple color of a material-ui ListItem?

Question

I can seem to find anywhere in the documentation how to go about setting the ripple color on a material-ui ListItem. I have the ListItem wrapped in a MuiThemeProvider with my overridden theme like this:

const muiTheme = getMuiTheme({
  palette: {
    hoverColor: 'red',
  },
});

<MuiThemeProvider muiTheme={muiTheme}>
  <ListItem>
    ...
  </ListItem>
</MuiThemeProvider>

What palette color property should I set to change the ripple color?

Answer 1

The ripple effect comes from a child component called TouchRipple. Specifically, the ripple color comes from the background-color of an element which is selectable using the MuiTouchRipple-child class. The ripple color is currentColor by default, but can be overridden easily.

Note that this works for any button-based component, not just ListItem.

Examples:

Styled Components API:

const MyListItem = styled(ListItem)`
    .MuiTouchRipple-child {
        background-color: red;
    }
`;

Hook API:

const useStyles = makeStyles({
    root: {
        '.MuiTouchRipple-child': {
            backgroundColor: 'red';
        }
    }
});

const MyListItem = () {
  const classes = useStyles();
  return <ListItem button className={classes.root}>Hook</ListItem>;
}
    

Global CSS:

.MuiListItem-root .MuiTouchRipple-child {
    background-color: red;
}

Answer 2

This is how you can globally change ripple color to red.

import React from "react";
import { createMuiTheme, ThemeProvider } 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";

const theme = createMuiTheme({
  overrides: {
    // Style sheet name
    MuiTouchRipple: {
      // Name of the rule
      child: {
        // Some CSS
        backgroundColor: "red"
      }
    }
  }
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <List>
        <ListItem button>
          <ListItemText primary="Item One" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="Item Two" />
        </ListItem>
        {/* <ListItem button> ... </ListItem> */}
      </List>
    </ThemeProvider>
  );
};

export default App;

Play with the code in CodeSandBox.

Useful links:

• Here's what the theme object looks like with the default values.

• The overrides key enables you to customize the appearance of all instances of a component type.

Answer 3

I got here working on a similar issue on the Button, but it appears to be consistent across ripple effect, so perhaps this will help someone in the future.

In Material-UI next/v1, the rippleColor is linked explicitly to the label color of the element. If you want the ripple and label to be different colors, you have to override the label color separately.

import MUIButton from 'material-ui/Button';
import {withStyles} from 'material-ui/styles';

const Button = (props) => {

    return <MUIButton className={props.classes.button}>Hat</MUIButton>

const styles = {
    button: {color: 'rebeccapurple'}
};

export default withStyles(styles)(Button);

This should get you an overridden ripple color.