Material UI 按钮悬停/活动背景颜色和文本颜色

Question

我创建了一个Appbar带有 3 个按钮的按钮，但是当我将鼠标悬停在这些按钮上时，我想更改颜色。背景颜色是#3c52b2，文本颜色是#fff，当我悬停在按钮上时，我希望背景颜色和文本颜色交换。我已经尝试了下面的代码，但仍然无法正常工作。

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

Answer 1

您可以在MUI v5中使用sxprop来做到这一点：

<Button
  variant="text"
  sx={{
    ':hover': {
      bgcolor: 'primary.main', // theme.palette.primary.main
      color: 'white',
    },
  }}
>
  Text
</Button>

或者，styled()如果您想创建可重用的组件：

const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
  ':hover': {
    color: theme.palette[color].main,
    backgroundColor: 'white',
  },
}));

<StyledButton variant="contained" color="primary">
  Contained
</StyledButton>
<StyledButton variant="contained" color="secondary">
  Contained
</StyledButton>

现场演示

Answer 2

您可能不想更改按钮的: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>

您也可以创建一个新的样式button组件：

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

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")
)