how to change mui ripple color

How to Change MUI Ripple Color

If you are using Material-UI Library (MUI) for your project, you might have noticed that the ripple effect on buttons and other components is in the default blue color. However, you can easily change the ripple color to match your project's design. Let me show you how.

Method 1: Using Theme Provider

The easiest way to change the ripple color is by using Theme Provider in MUI. Here's how you can do it:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000' // Your desired color
    }
  }
})

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>My Button</Button>
    </ThemeProvider>
  )
}

In the code above, we have created a custom theme using the createMuiTheme function and set the primary color to red. Then we have wrapped our button component with the ThemeProvider component and passed our custom theme as the prop.

Method 2: Using CSS

If you prefer using CSS to change the ripple color, you can do it by targeting the .MuiTouchRipple-root class. Here's an example:

.MuiTouchRipple-root {
  background-color: #ff0000; // Your desired color
}

In the code above, we have targeted the .MuiTouchRipple-root class and set the background color to red. You can add this CSS to your global stylesheet or add it to the component's style prop.

That's it! You have successfully changed the ripple color in MUI. You can use either of the methods mentioned above based on your preference and project requirements.