CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
four-eyes
four-eyes

Reputation: 12439

Change Ripple Color on click of Material UI <Button />

This is my <MyButton /> Component

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    backgroundColor: 'green',
    "&:hover": {
      backgroundColor: "red"
    },
  },
});

function MyButton(props) {

  return (
    <Button
      className={props.classes.button} >
      {props.text}
    </Button>
  );
}

export default withStyles(styles)(MyButton);

Currently, there is the default click effect on the button, brightening/lightening it up on click (see here: https://material-ui.com/demos/buttons/). However, I want the color of the "ripple" to be blue when the button is clicked.

I tried 

"&:click": {
    backgroundColor: "blue"
},

and

"&:active": {
    backgroundColor: "blue"
},

No luck though. How do I change the color of the ripple when the button is clicked?

Upvotes: 15

Views: 24767

Answers (4)

Ryan Cogswell
Ryan Cogswell

Reputation: 81066

Here's an example showing how to modify the button ripple for v4 (v5 example further down):

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    backgroundColor: "green",
    "&:hover": {
      backgroundColor: "red"
    }
  },
  child: {
    backgroundColor: "blue"
  },
  rippleVisible: {
    opacity: 0.5,
    animation: `$enter 550ms ${theme.transitions.easing.easeInOut}`
  },
  "@keyframes enter": {
    "0%": {
      transform: "scale(0)",
      opacity: 0.1
    },
    "100%": {
      transform: "scale(1)",
      opacity: 0.5
    }
  }
});

function MyButton({ classes, ...other }) {
  const { button: buttonClass, ...rippleClasses } = classes;
  return (
    <Button
      TouchRippleProps={{ classes: rippleClasses }}
      className={buttonClass}
      {...other}
    />
  );
}

export default withStyles(styles)(MyButton);

Edit button ripple

The default opacity of the ripple is 0.3. In the example I have increased this to 0.5 to make it easier to verify that the ripple is blue. Since the button background is red (due to the hover styling), the result is purple. You'll get a different overall effect if you move to the button via the keyboard since the blue will be layered on top of the button's green background.

You'll find some additional background in my answer here: How to set MuiButton text and active color

The main resource for the styling of the ripple is its source code: https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/ButtonBase/TouchRipple.js

JSS keyframes documentation: https://cssinjs.org/jss-syntax/?v=v10.3.0#keyframes-animation

Here's a similar example for MUI v5:

import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
import { keyframes } from "@emotion/react";

const enterKeyframe = keyframes`
  0% {
    transform: scale(0);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
`;
const StyledButton = styled(Button)`
  background-color: green;
  &:hover {
    background-color: red;
  }
  && .MuiTouchRipple-child {
    background-color: blue;
  }
  && .MuiTouchRipple-rippleVisible {
    opacity: 0.5;
    animation-name: ${enterKeyframe};
    animation-duration: 550ms;
    animation-timing-function: ${({ theme }) =>
      theme.transitions.easing.easeInOut};
  }
`;
export default StyledButton;

Edit button ripple

v5 TouchRipple source code: https://github.com/mui/material-ui/blob/v5.4.0/packages/mui-material/src/ButtonBase/TouchRipple.js#L92

Emotion keyframes documentation: https://emotion.sh/docs/keyframes

Answer demonstrating use of keyframes: How to apply custom animation effect @keyframes in MUI?

Upvotes: 19

Mike K
Mike K

Reputation: 6501

I've adapted the solution from this answer to work with styled components and emotion/styled.

const ButtonStyledWithSC = styledSC(Button)`
  && {
    background-color: magenta;
    width: 10rem;
    height: 3rem;
    margin: 10px;

    &:hover {
      background-color: white;
    }

    > .MuiTouchRipple-root span {
      background-color: cyan;
    }
  }
`;

heuristic-feistel-0znpi

Upvotes: 1

Muhammad Muzamil
Muhammad Muzamil

Reputation: 1252

Here is the hack for Material-UI 4.9.10

Add a class to button and then add the below code to given class

 Btn:{
    "& .MuiTouchRipple-root span":{
      backgroundColor: 'red!important',
      opacity: .3,
    },
},

Upvotes: 5

Smitty
Smitty

Reputation: 1935

Using CSS - can be tricky to identify the class for the MUI component at times, but for our usage of the <ListItem> element which is rendered like a button:

.MuiListItem-button:hover {
  background-color: rgba(23, 93, 131, 0.12) !important;
}
.MuiTouchRipple-rippleVisible {
  color: #005d83 !important;
}

Note: we use a dark blue and customized the background-color attribute with some opacity.

Upvotes: 2

Related Questions