如何禁用樣式組件內部 material-ui 按鈕的 hover 效果

Question

我添加了 css hover 屬性來禁用按鈕的 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>
  )
}

Answer 3

如果有人需要，這是 v5 的解決方案

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

          </IconButton>

Answer 4

您可以嘗試將按鈕的背景設置為none

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

Answer 5

如果您使用帶有 className 的原始 Button 組件，您可以像這樣將 disableRipple 添加到按鈕。 <Button disableRipple>

Answer 6

您可以通過樣式化組件覆蓋它：

const StyledButton = styled(Button)`
    &:hover {
      background-color: transparent;
    }
`;

Answer 7

這應該工作

const StyledButton = styled(Button)`
  &&.MuiButton-root {
    &:hover {
      background: none;
    }
  }
`