Question

这些是我的按钮代码。不知何故，只有当我在 Button 本身中声明样式时，背景颜色才有效。在 const useStyles 中说明背景颜色不起作用，因此，我只这样做了。我该如何编码，当它悬停在背景颜色上时会发生变化？

<Button
      variant="contained"
      {...otherProps}
      className={classes.margin}
      style={{ backgroundColor: " #e31837" }}
    >
      {children}
    </Button>

Answer 1

您可以将其添加到样式中：

'&:hover': {
    backgroundColor: ‘red’
}

Answer 2

<Button
      variant="contained"
      {...otherProps}
      className={classes.margin}
      onMouseOver={this.toggleHover} 
      onMouseOut={this.toggleHover} 
      style={btnStyle}
    >
      {children}
</Button>

然后添加一个toggleHover函数

toggleHover(){
    this.setState({hover: !this.state.hover})
}

最后在你的渲染函数上将你的样式设置为一个变量

let btnStyle = {'backgroundColor: #e31837'};
if (this.state.hover) {
    btnStyle = {'backgroundColor: #000000'}
}

Answer 3

您可以使用 root 属性更改按钮样式 (docs)，还可以在悬停时更改其背景：

const useStyles = makeStyles((theme) => ({
  root: {
      backgroundColor: 'red',
      '&:hover': {
        backgroundColor: 'blue'
      }
  }
}));


<Button
      variant="contained"
      {...otherProps}
      className={classes.root}
      style={{ backgroundColor: " #e31837" }}
    >
      {children}
    </Button>

Answer 4

您可以参考以下代码片段

import React from 'react';
import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { green, purple } from '@material-ui/core/colors';

const ColorButton = withStyles((theme) => ({
  root: {
    color: theme.palette.getContrastText(purple[500]),
    backgroundColor: purple[500],
    '&:hover': {
      backgroundColor: purple[700],
    },
  },
}))(Button);

export default function CustomizedButtons() {
  const classes = useStyles();

  return (
    <div>
      <ColorButton variant="contained" color="primary" className={classes.margin}>
        Custom CSS
      </ColorButton>
    </div>
  )
}

如何将鼠标悬停在此按钮样式上？

4 个答案: