How to disable the hover effect of material-ui button inside of a styled component

Question

I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this?

import Button from 'material-ui/Button'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  &:hover {
    background: none;
  }
`
export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}>
      login
    </StyledButton>
  )
}

sx={{ "&:hover": { backgroundColor: "transparent" }} } should work in your case. — Yana Trifonova, Feb 17 '22 at 13:35

score 65 · Accepted Answer · edited Jun 29 '18 at 00:30

65

You can solve this problem by adding an inline style

export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}
      style={{ backgroundColor: 'transparent' }} >
      login
    </StyledButton>
  )
}

edited Jun 29 '18 at 00:30

The Lazy Coder

11,560
4
51
69

answered May 15 '18 at 05:28

ccd

5,788
10
46
96

also you have a major typo, you could have at least wrote `style={{ backgroundColor: 'transparent' }}` – JGallardo Jun 23 '18 at 23:20
1

Yeah, one more dirty trick needed, while they could just have it optional. – Onkeltem Mar 01 '21 at 07:33

score 50 · Answer 2 · edited Mar 21 '19 at 20:41

50

Try setting it to the same color as the background:

root = {
    backgroundColor: "#FFF"
    "&:hover": {
        //you want this to be the same as the backgroundColor above
        backgroundColor: "#FFF"
    }
}

edited Mar 21 '19 at 20:41

IvanS95

5,364
4
24
62

answered Jun 28 '18 at 00:02

Nishant Mehta

612
4
11

score 27 · Answer 3 · answered Sep 28 '21 at 23:44

27

this is solution for v5 if anyone needs it

         <IconButton
            disableElevation
            disableRipple
            size="small"
            sx={{
              ml: 1,
              "&.MuiButtonBase-root:hover": {
                bgcolor: "transparent"
              }
            }}
          >

          </IconButton>

answered Sep 28 '21 at 23:44

Said Pc

565
7
13

Btw: This also is the way to go for the MUI Radio component because it inherits ButtonBase API. – Andru Sep 19 '22 at 15:05

score 9 · Answer 4 · edited May 29 '21 at 22:22

9

You can try setting the background of the button as none

button: {    
    '&:hover': {
        background: 'none',
    },
}

edited May 29 '21 at 22:22

d-_-b

21,536
40
150
256

answered Apr 27 '21 at 20:17

Saranya Jena

91
1
2

score 0 · Answer 5 · answered Jun 16 '20 at 08:12

0

If you used the origin Button component with className instead, you could have added disableRipple to the button like that. <Button disableRipple>

answered Jun 16 '20 at 08:12

Maya Liberman

328
3
5

20

This does disable the effect, but not the hover. – doublejosh Jul 21 '20 at 20:54

score 0 · Answer 6 · answered Mar 09 '22 at 11:07

0

You can just override it via a styled component:

const StyledButton = styled(Button)`
    &:hover {
      background-color: transparent;
    }
`;

answered Mar 09 '22 at 11:07

Robin Wieruch

14,900
10
82
107

score 0 · Answer 7 · answered Aug 18 '22 at 18:59

0

This should work

const StyledButton = styled(Button)`
  &&.MuiButton-root {
    &:hover {
      background: none;
    }
  }
`

answered Aug 18 '22 at 18:59

MD. AL-HASAN MRIDHA

1

score 0 · Answer 8 · answered Mar 12 '23 at 01:52

We can able to disable material-ui button hover effect in following way by adding these two details in the component In my case I did for Switch button.

disableRipple

style={{ backgroundColor: "transparent" }}

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

const styles = {
  
};

class SwitchLabels extends React.Component {
  state = {
    checked: true
  };

  handleChange = (event) => {
    this.setState({ checked: event.target.checked });
  };

  render() {
    return (
      <FormControlLabel
        control={
          <Switch
            classes={this.props.classes}
            checked={this.state.checked}
            onChange={this.handleChange}
            disableElevation
            disableRipple
            style={{ backgroundColor: "transparent" }}
            value="checked"
            color="primary"
          />
        }
        labelPlacement="start"
        label={this.state.checked ? "On" : 'Off'}
      />
    );
  }
}

export default withStyles(styles)(SwitchLabels);

Sergey Rybalchenko · Answer 9 · 2023-08-16T15:58:03.007

-1

Work for me

 <Button 
    sx={{
      color:'#000000', 
      background:'rgba(0, 0, 0, 0.065)', 
      width:'84px', 
      height:'51px', 
      boxShadow: '0px 0px 4px 0px #00000040',
      fontSize:'20px',
      '&:hover': {
           background:'rgba(0, 0, 0, 0.065)'
      },
    }} 
    variant="contained">
    +50$
   </Button>

edited Aug 16 '23 at 15:58

answered Aug 16 '23 at 15:53

Sergey Rybalchenko

1
1

OP is looking to style a button created using `styled` utility. – 0xts Aug 18 '23 at 05:22

How to disable the hover effect of material-ui button inside of a styled component

9 Answers9