如何在Material-UI的makeStyles中正确配置transitionDelay属性？

• transitionDelay 的值缺少合法时间单位：CSS 中时间类属性必须带 s（秒）或 ms（毫秒）后缀，你写的 '1' 属于无效值，会被浏览器直接忽略。
• 过渡规则未在基础样式中声明：过渡配置不能只写在 :hover 伪类内，必须先在元素的基础状态下定义 transition 属性，指定需要过渡的属性、过渡时长等基础规则，否则 hover 状态的延迟配置不会生效。

const useStyles = makeStyles({
  buttonStyle: {
    background: "red",
    // 基础样式先定义过渡规则：指定过渡属性、时长、缓动效果
    transition: "transform 0.3s ease, background 0.3s ease",
    "&:hover": {
      transitionDelay: "1s", // 补上时间单位，也可写为1000ms
      transform: "scale(1.1)",
      // 若需要背景色也触发过渡，替换为和基础状态不同的色值即可
      background: "darkred",
    },
  },
});

如果需要所有可过渡属性都应用该延迟，也可以直接在基础样式的 transition 属性中统一配置，无需单独写在 hover 规则里：

// 第四位参数就是延迟时间，等价于单独配置transitionDelay
transition: "all 0.3s ease 1s"

内容的提问来源于stack exchange，提问作者Sava