MUI按钮悬停背景颜色和文本颜色 [英] MUI Button hover background color and text color

问题描述

我已经创建了一个包含3个按钮的Appbar，但是我想在悬停到这些按钮时更改颜色。背景颜色为#3c52b2，文本颜色为#fff，我希望在悬停到该按钮时交换背景颜色和文本颜色。 我已尝试下面的代码，但仍然不起作用。

Button: {
  '&:hover': {
    backgroundColor: '#ffffff',
    boxShadow: 'none',
  },
  '&:active': {
    boxShadow: 'none',
    backgroundColor: '#3c52b2',
  },
},

推荐答案

您可能不想更改按钮的:active状态，但希望更改默认状态和:hover状态。下面将按钮color设置为#fff，将backgroundColor设置为#3c52b2，并打开:hover。

我不确定您是如何应用更新的样式的(或者您是如何尝试覆盖默认样式的)，我在下面使用makeStyles()创建了此代码段，但其思路与withStyles() HOC相同。

const { 
  AppBar,
  Button,
  makeStyles,
  Toolbar,
  Typography,
} = MaterialUI

const useStyles = makeStyles({
  flexGrow: {
    flex: '1',
  },
  button: {
    backgroundColor: '#3c52b2',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#fff',
      color: '#3c52b2',
  },
}})

function AppBarWithButtons() {
  const classes = useStyles()
  
  return (
    <AppBar>
      <Toolbar>
        <Typography>
          YourApp
        </Typography>
        <div className={classes.flexGrow} />
        <Button className={classes.button}>
          Button 1
        </Button>
        <Button className={classes.button}>
          Button 2
        </Button>
      </Toolbar>
    </AppBar>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <AppBarWithButtons />
  </React.StrictMode>,
  document.getElementById("root")
)

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

您也可以只需create a new styled button component：

const StyledButton = withStyles({
  root: {
    backgroundColor: '#3c52b2',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#fff',
      color: '#3c52b2',
  },
}})(Button);

const { 
  AppBar,
  Button,
  Toolbar,
  Typography,
  withStyles
} = MaterialUI

const StyledButton = withStyles({
  root: {
    backgroundColor: '#3c52b2',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#fff',
      color: '#3c52b2',
  },
}})(Button);

function AppBarWithButtons() {
  return (
    <AppBar>
      <Toolbar>
        <Typography>
          YourApp
        </Typography>
        <div style={{flex: '1'}} />
        <StyledButton>
          Button 1
        </StyledButton>
        <StyledButton>
          Button 2
        </StyledButton>
      </Toolbar>
    </AppBar>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <AppBarWithButtons />
  </React.StrictMode>,
  document.getElementById("root")
)

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

这篇关于MUI按钮悬停背景颜色和文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！