Material UI v5 基于props设置makeStyles条件动画报JSS关键帧未定义警告

我希望通过props条件控制Material UI的makeStyles动画效果，当前使用的Material UI版本为^5.0.4，相关代码截图如下：


运行代码时出现如下警告日志：

Warning: [JSS] Referenced keyframes rule "effect" is not defined

出现该警告的核心原因是JSS无法识别你在animation属性中引用的effect关键帧，和MUI v5中@mui/styles包的样式作用域处理逻辑有关，可按照以下两种方案修复：

方案1：抽离关键帧为独立变量（推荐，无作用域冲突问题） #

1. 从MUI样式工具中导入keyframes方法，提前创建关键帧动画变量，不要直接在makeStyles内部定义关键帧
2. animation属性中直接引用该变量拼接动画参数，不要用引号包裹关键帧名称
   代码示例如下：

// 导入依赖
import { makeStyles } from '@mui/styles';
import { keyframes } from '@mui/material/styles';

// 提前定义关键帧动画
const effect = keyframes`
  0% {
    /* 动画起始样式 */
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    /* 动画结束样式 */
    opacity: 1;
    transform: translateY(0);
  }
`;

// 定义样式
const useStyles = makeStyles()((theme, props) => ({
  targetElement: {
    // 动态控制动画开关，直接引用effect变量即可
    animation: props.enableAnimation ? `${effect} 0.3s ease forwards` : 'none',
  }
}));

方案2：makeStyles内部定义关键帧（适配旧写法） #

如果需要把关键帧定义在makeStyles内部，需要注意：

• 关键帧定义要加@keyframes前缀
• 引用关键帧时必须加$前缀，不能直接写字符串"effect"
  代码示例如下：

const useStyles = makeStyles()((theme, props) => ({
  // 内部定义关键帧
  '@keyframes effect': {
    '0%': { opacity: 0 },
    '100%': { opacity: 1 }
  },
  targetElement: {
    // 引用时加$前缀
    animation: props.enableAnimation ? '$effect 0.3s ease forwards' : 'none',
  }
}));

额外说明 #

MUI v5官方已经不推荐使用makeStyles编写样式，优先改用styled组件或者sx属性实现动态样式，写法更简洁也不会出现类似的作用域问题，示例如下：

import { styled, keyframes } from '@mui/material/styles';

const effect = keyframes`
  0% { opacity: 0; }
  100% { opacity: 1; }
`;

// 创建带动态动画的自定义组件
const AnimatedContainer = styled('div', {
  shouldForwardProp: (prop) => prop !== 'enableAnimation'
})(({ enableAnimation }) => ({
  animation: enableAnimation ? `${effect} 0.3s ease` : 'none'
}));

// 业务中使用
<AnimatedContainer enableAnimation={你的控制变量} />

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