如何禁用样式组件内material-ui按钮的悬停效果答案

【问题标题】：How to disable the hover effect of material-ui button inside of a styled component如何禁用样式组件内material-ui按钮的悬停效果
【发布时间】：2018-10-20 05:41:02
【问题描述】：

我添加了 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>
  )
}

【问题讨论】：

标签： css reactjs hover material-ui styled-components

【解决方案1】：

如果有人需要，这是 v5 的解决方案

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

          </IconButton>

【讨论】：

【解决方案2】：

您可以尝试将按钮的背景设置为none

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

【讨论】：

【解决方案3】：

如果您使用带有 className 的原始 Button 组件，您可以像这样将 disableRipple 添加到按钮。 <Button disableRipple>

【讨论】：

这会禁用效果，但不会禁用悬停。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

你可以通过添加内联样式来解决这个问题

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

【讨论】：

还有一个大错别字，你至少可以写style={{ backgroundColor: 'transparent' }}
这个解决方案解决了我的问题
是的，还需要一个肮脏的把戏，虽然他们可以选择它。