我在React.js中創建了一個帶有3個按鈕的Appbar組件，但是當我懸停在這些按鈕上時，我想改變顏色。背景顏色為#3c52b2，文本顏色為#fff。當我懸停在按鈕上時，我希望背景顏色和文本顏色交換。

我已經嘗試了下面的代碼，但仍然不工作。

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

您可能不想改變按鈕的:active狀態，而是改變默認狀態和:hover狀態。下面將按鈕顏色設置為# fff，背景顏色設置為#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>

您可以在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>

現場演示

如果你想讓默認的mui按鈕在懸停時變暗，試試這個mui主題:

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

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

我在應用程序中使用的最簡單的方法。

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