如何在Styled Components中禁用Material-UI按钮的悬浮效果

嘿，我懂你遇到的困扰——想用styled-components给Material-UI的Button加hover样式来禁用悬浮效果，但设置完全没起作用对吧？这其实是因为Material-UI组件的默认样式优先级比咱们自定义的样式高，咱们可以用这几种方法解决：

方法1：快速提升样式优先级 #

虽然一般不推荐滥用!important，但如果是简单场景或者想快速验证效果，这招最直接：

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

const StyledButton = styled(Button)`
  &:hover {
    background: none !important;
  }
`

export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton variant="raised" onClick={onClick}>
      login
    </StyledButton>
  )
}

方法2：精准匹配Material-UI类名（更优雅） #

Material-UI的Button组件会给不同类型的按钮添加特定类名，比如你用的raised类型按钮对应MuiButton-contained类，咱们直接针对这个类的hover状态写样式，就能稳稳覆盖默认效果：

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

const StyledButton = styled(Button)`
  &.MuiButton-contained:hover {
    background-color: transparent;
    box-shadow: none; // 如果连悬浮时的阴影也想去掉，可以加上这行
  }
`

export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton variant="raised" onClick={onClick}>
      login
    </StyledButton>
  )
}

方法3：用Material-UI原生方式自定义样式 #

如果不想依赖styled-components的嵌套写法，也可以直接用Material-UI的makeStyles来定义样式，通过classes属性传入：

import Button from 'material-ui/Button'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  customHover: {
    '&:hover': {
      background: 'none',
      boxShadow: 'none'
    }
  }
})

export const SubmitButton = ({ onClick }) => {
  const classes = useStyles()
  return (
    <Button 
      variant="raised" 
      onClick={onClick}
      classes={{ containedHover: classes.customHover }}
    >
      login
    </Button>
  )
}

核心逻辑就是：Material-UI的内置样式通过特定类名控制组件状态，只要让咱们的自定义样式优先级和它一致或者更高，就能覆盖默认的悬浮效果啦。

内容的提问来源于stack exchange，提问作者ccd