自定义React Material UI v4默认动画时长 实现不同进出时长且无需!important

你之前的配置需要加!important，是因为Collapse组件的过渡参数为内部动态生成的行内样式，优先级高于主题注入的类名样式，需要强制提权才能生效。MUI原生支持通过timeout属性配置过渡时长，可分别定义进入、退出阶段的时长，不需要修改样式也不需要加!important，实现方式如下：

1. 全局配置所有Collapse的默认过渡时长 #

在createTheme的props字段下为MuiCollapse注入默认属性即可全局生效：

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  props: {
    MuiCollapse: {
      // 分别设置进入、退出动画时长，单位为毫秒
      timeout: {
        enter: 1000, // 进入动画时长1000ms
        exit: 300 // 退出动画时长300ms
      }
    }
  }
});

2. 单个组件单独配置时长 #

如果仅需要给特定Collapse设置自定义时长，直接给组件传timeout属性即可，优先级高于全局配置：

import Collapse from '@material-ui/core/Collapse';
import { useState } from 'react';

function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <Collapse in={open} timeout={{ enter: 800, exit: 200 }}>
      {/* 折叠的内容区域 */}
    </Collapse>
  )
}

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