Material UI Button悬停背景颜色和文字颜色

Question

我在 React.js 中创建了一个

Appbar

组件，里面有 3 个按钮，但我想在将鼠标悬停在这些按钮上时更改颜色。背景色为

#3c52b2

，文字颜色为

#fff

。当我将鼠标悬停在按钮上时，我希望背景颜色和文本颜色交换。

我已经尝试了下面的代码，但仍然无法正常工作。

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

Answer 1

您可能不想更改按钮的

: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 { 
  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>

Answer 2

您可以在 MUI v5 中使用

sx

prop:

<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 3

如果你想要像默认 mui 按钮这样的行为 - 在悬停期间变暗，试试 mui 主题：

import { darken } from '@material-ui/core/styles';

containedPrimary: {
    backgroundColor: someColor,
    '&:hover': {
        backgroundColor: darken(someColor, 0.3),
    },
},

Answer 4

我在申请中使用的最简单的方法。

const useStyle = {
  Button: {
    "&:hover": {
      backgroundColor: "#ffffff !important",
      boxShadow: "none !important",
    },
    "&:active": {
      boxShadow: "none !important",
      backgroundColor: "#3c52b2 !important",
    },
  },
};

return <Button sx={useStyle.button}>Click here</Button>;