MUI sx prop 中的动态样式？

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",
        }}
      />
    </>
  );
}