如何在样式化组件中禁用 Material-UI 按钮的悬停效果

Question

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

- ccd

---

sx={{ "&:hover": { backgroundColor: "transparent" }} } 应该适用于你的情况。 - Yana Trifonova

Answer 1

您可以通过添加内联样式来解决此问题

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

- ccd

---

你还有一个很大的错别字，你至少应该写成 style={{ backgroundColor: 'transparent' }}。 - JGallardo

这个解决方案解决了我的问题。 - Andy B

是的，还需要一个肮脏的技巧，而他们本可以将其作为可选项。 - Onkeltem

Answer 2

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

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

- Nishant Mehta

Answer 3

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

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

          </IconButton>

- Said Pc

---

顺便说一下：这也是MUI Radio组件的正确使用方式，因为它继承了ButtonBase API。 - Andru

Answer 4

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

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

- Saranya Jena

Answer 5

您可以通过样式化组件来覆盖它：

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

- Robin Wieruch

Answer 6

这应该可以工作

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

- MD. AL-HASAN MRIDHA

Answer 7

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

- Maya Liberman

---

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

Answer 8

我们可以通过以下方式禁用 material-ui 按钮的 hover 效果，只需在组件中添加这两个细节即可。在我的情况下，我是为 Switch 按钮添加。

disableRipple

style={{ backgroundColor: "transparent" }}

import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  
};

class SwitchLabels extends React.Component {
  state = {
    checked: true
  };

  handleChange = (event) => {
    this.setState({ checked: event.target.checked });
  };

  render() {
    return (
      <FormControlLabel
        control={
          <Switch
            classes={this.props.classes}
            checked={this.state.checked}
            onChange={this.handleChange}
            disableElevation
            disableRipple
            style={{ backgroundColor: "transparent" }}
            value="checked"
            color="primary"
          />
        }
        labelPlacement="start"
        label={this.state.checked ? "On" : 'Off'}
      />
    );
  }
}

export default withStyles(styles)(SwitchLabels);

- KARTHIKEYAN.A

Answer 9

工作为我服务

 <Button 
    sx={{
      color:'#000000', 
      background:'rgba(0, 0, 0, 0.065)', 
      width:'84px', 
      height:'51px', 
      boxShadow: '0px 0px 4px 0px #00000040',
      fontSize:'20px',
      '&:hover': {
           background:'rgba(0, 0, 0, 0.065)'
      },
    }} 
    variant="contained">
    +50$
   </Button>

- Sergey Rybalchenko

---

OP想要使用styled工具来为一个创建的按钮添加样式。 - 0xts