MUI sx属性中的动态样式？

Question

可以在MUI sx属性中使用动态样式吗？如下所示：

<Box
  key={index}
  sx={{
    height: "100%",
    width: "100%",
    {index === imgIndex &&
    {"@keyframes fadeIn": {
        from: {
            opacity: 0,
        },
        to: {
            opacity: 1,
        },
        },
        "fade-in": {
        animation: "$fadeIn 2.5s",
        }}}
    }}
>
  {child}
</Box>

如果不是，有什么选项可以做这样的事情？

我的用例是，这是使用MUI4 (makeStyles)完成的旋转木马的重构，我正在迁移到MUI5 (不再使用makeStyles)

Answer 1

您可以通过将条件放在属性本身而不是对象内部来执行此操作。

以下是如何在单击按钮时更改框的bgColor的示例

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";

export default function BoxSx() {
  const [clicked, setClicked] = React.useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <>
      <Button onClick={handleClick}>Change</Button>
      <Box
        sx={{
          width: 300,
          height: 300,
          bgcolor: clicked ? "primary.dark" : "secondary.light",
        }}
      />
    </>
  );
}