스타일 구성 요소 내에서 material-ui 버튼의 호버 효과를 비활성화하는 방법

스타일 구성 요소 내에서 material-ui 버튼의 호버 효과를 비활성화하는 방법

버튼의 호버 효과를 무효로 하기 위해 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>
  )
}

인라인 스타일을 추가하여 이 문제를 해결할 수 있습니다.

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

배경과 같은 색으로 설정해 보십시오.

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

필요한 경우 v5용 솔루션입니다.

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

          </IconButton>

버튼의 배경을 다음과 같이 설정할 수 있습니다.none

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

대신 className에서 origin Button 컴포넌트를 사용하면 버튼에 disableRiple을 추가할 수 있습니다. <Button disableRipple>

스타일 컴포넌트를 통해 덮어쓸 수 있습니다.

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

이거면 될 것 같아

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

언급URL : https://stackoverflow.com/questions/50264638/how-to-disable-the-hover-effect-of-material-ui-button-inside-of-a-styled-compone