如何在Material UI v5的styled组件中添加keyframes动画？

核心原因 #

MUI v5 的styled组件底层基于emotion（默认）或styled-components实现，旧版createStyle配套的keyframes导入逻辑已不兼容styled场景，按以下步骤修改即可正常使用：

正确实现步骤 #

1. 导入对应样式引擎的keyframes方法
   • 默认emotion引擎：

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

   • 若使用styled-components引擎：

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

2. 定义keyframes动画

   // 示例：淡入动画
   const fadeIn = keyframes`
     from {
       opacity: 0;
       transform: translateY(10px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   `;
   

3. 在styled组件中引用动画变量

   const AnimatedContainer = styled('div')(({ theme }) => ({
     width: 200,
     height: 200,
     backgroundColor: theme.palette.primary.main,
     // 直接插入keyframes变量，不要写成字符串
     animation: `${fadeIn} 0.4s ease-in-out forwards`
   }));
   

常见报错排查点 #

• 不要使用v4版本的导入路径import { keyframes } from '@material-ui/core/styles'，该路径导出的keyframes仅兼容旧版makeStyles/createStyle场景
• 不要把动画名写成静态字符串，比如animation: 'fadeIn 0.4s'，必须用模板字符串插入之前定义的keyframes变量
• 确认项目已安装对应样式引擎的依赖包，缺失依赖会导致keyframes返回值异常

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