Как отключить эффект наведения кнопки Material-UI внутри стилизованного компонента

Question

Я добавил свойство css hover, чтобы отключить эффект наведения кнопки, но в моем случае это не работает, как мне это исправить?

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

Answer 1

Попробуйте установить для него тот же цвет, что и для фона:

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

Answer 2

Вы можете решить эту проблему, добавив встроенный стиль

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