mui v5 在实用条件下使用风格的最佳方式是什么？

Question

我正在将一个项目从 material ui v4 升级到 v5，并且很难正确更新 classes/styles。

这是一个沙盒：

https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-2j8vze?file=/demo.tsx:1611-1618

在这段代码中，2 个框显示了 2 种应用样式的方式。我想避免使用 makeStyles 并按照建议使用 SX/emotion。

所以 backgroundColor 是红色的，悬停时它变成蓝色。它适用于两者。现在，如果我单击开关，背景颜色变为黄色，但在第二个框悬停时，颜色保持蓝色而不是灰色。

我错过了什么？谢谢

import React, { useState } from "react";
import { makeStyles } from "@mui/styles";
import clsx from "clsx";
import { Box, Switch } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme();

const useStyles = makeStyles((theme) => ({
  imageWithBorder: {
    height: theme.spacing(10),
    width: theme.spacing(30),
    padding: theme.spacing(2),
    margin: theme.spacing(2),
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue"
    }
  },
  greyHover: {
    backgroundColor: "yellow",
    "&:hover": { backgroundColor: "grey" }
  }
}));

const styles = {
  imageWithBorder: {
    height: 80,
    width: 240,
    padding: 2,
    margin: 2,
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue"
    }
  },
  greyHover: {
    backgroundColor: "yellow",
    "&:hover": { backgroundColor: "grey" }
  }
};

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

  const [checked, setChecked] = useState(false);

  return (
    <Box sx={{ display: "flex", flexDirection: "column" }}>
      <Box>
        Enable grey hover : <Switch checked={checked} onChange={handleChange} />
      </Box>
      <p>1 With clsx & useStyles</p>
      <Box
        className={clsx(classes.imageWithBorder, checked && classes.greyHover)}
      />

      <p>2 With sx & plain styles</p>
      <Box sx={[styles.imageWithBorder, checked && styles.greyHover]} />
    </Box>
  );
  function handleChange(event) {
    setChecked(event.target.checked);
  }
}

export default function BasicUsage() {
  return (
    <ThemeProvider theme={theme}>
      <Test />
    </ThemeProvider>
  );
}

Answer 1

由于某些原因，mui 不接受 backgroundColor: "grey"。它甚至没有在输出中呈现它 css.

See gif

而是使用 gray 或十六进制值。

https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-d0npw6?file=/demo.tsx

mui v5 在实用条件下使用风格的最佳方式是什么？

mui v5 what is the best way to use style with pragmatic condition?

reactjs

material-ui