如何禁用样式组件内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>
  )
}

原文由 ccd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过添加内联样式来解决此问题

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

原文由 ccd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试将其设置为与背景相同的颜色：

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

原文由 Nishant Mehta 发布，翻译遵循 CC BY-SA 4.0 许可协议