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

Posted 2023-02-22

【中文标题】如何禁用样式组件内material-ui按钮的悬停效果

【英文标题】：How to disable the hover effect of material-ui button inside of a styled component

【发布时间】：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>
  )

【参考方案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'

这个解决方案解决了我的问题

是的，还需要一个肮脏的把戏，虽然他们可以选择它。