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

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>
  )
}
cssreactjshovermaterial-uistyled-components


Solution 1:[1]

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>
  )
}

Solution 2:[2]

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"
    }
}

Solution 3:[3]

this is solution for v5 if anyone needs it

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

          </IconButton>

Solution 4:[4]

You can try setting the background of the button as none

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

Solution 5:[5]

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

Solution 6:[6]

You can just override it via a styled component:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 The Lazy Coder
Solution 2 IvanS95
Solution 3 Said Pc
Solution 4 d-_-b
Solution 5 Maya Liberman
Solution 6 Robin Wieruch

Related Questions