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

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

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