React 如何删除 Material-UI Select 的 animation

Question

我正在使用 React Material UI 的 Select 组件。 我希望删除或加速菜单打开时出现的 animation。 我试过类似的东西：

 <Select
     ...
     TransitionComponent={({children}) => children}
 >
     <MenuItem value={...}>...</MenuItem>
     ...
 </Select>

但这不起作用，请帮助

Answer 1

将此添加到您的样式表中：

.MuiMenu-paper {
    transition-duration: 0s !important;
}

这基本上覆盖了 select 下拉列表的转换持续时间并将其设置为 0 秒。

您还可以根据自己的喜好更改持续时间（使其更快）。 默认的 animation 持续时间为：

transition-duration: 251ms, 167ms;

Answer 2

它不起作用的原因：

MUI <Select /> API 没有道具TransitionComponent ，以及其他一些组件，如<Tooltip />确实有

参考：API 文档

• MUI工具提示

• 梅泽0626222614BDEE31951D84C64E5E9FFZ

相关 QA： React Material UI Tooltips Disable Animation

---

解决方案

覆盖过渡样式就可以了。

div.MuiPaper-root {
  transition: none !important;
}

---

---

解释

选项的 HTML 结构：

由于是在主组件之外动态生成的，我们不适合直接给它们设置styles。

但是，我们可以选择通过诸如MuiPaper-root之类的类名或诸如给定 id 之类的其他方式覆盖 styles。

<div
  class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
  tabindex="-1"
  style="opacity: 1; transform: none; min-width: 40px; transition: opacity 251ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left: 16px; transform-origin: -8px 7.7px;"
>
  <ul
    class="MuiList-root MuiMenu-list MuiList-padding"
    role="listbox"
    tabindex="-1"
  >
    ...
  </ul>
</div>;

Answer 3

要添加到 keikai 的答案，您还可以通过主题更改全局执行此操作：

const theme = createMuiTheme({
  overrides: {
    MuiPaper: {
      root: {
        transition: 'none !important'
      },
    },
  }
});

Answer 4

对于使用相应 Material UI InputLabel组件和 mui Select组件的用户，我能够将以下道具传递给InputLabel组件以禁用 animation 并完全收缩：

<div>
   <FormControl>
     <InputLabel
       disableAnimation={true}
       shrink={false}
       ...
     >
       {`some label`}
     </InputLabel>
     <Select>
      {`...`}
     </Select>
   </FormControl>
 </div>

MUI 输入 Label API