React 如何移除 Material-UI Select 组件的动画效果

Question

我正在使用React Material UI的Select组件。我希望移除或加速菜单打开时的动画效果。我尝试过以下代码：

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

但是这不起作用，请帮忙。

- Divyansh Goenka

Answer 1

将以下内容添加到您的样式表中：

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

这个操作覆盖了下拉选择框的过渡时间，并将其设置为0秒。

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

transition-duration: 251ms, 167ms;

- Anatol

---

还有进入延迟吗？因为即使现在也需要一秒钟才能出现..我想让它完全流畅... - Divyansh Goenka

据我所见，似乎没有任何你可以控制的输入延迟。我认为你所指的延迟只是React渲染组件所需的时间。 - Anatol

Answer 2

它不起作用的原因是：MUI <Select /> API没有propsTransitionComponent，而其他一些组件（如<Tooltip />）确实具有该属性。

参考：API文档

• MUI Tooltip

• MUI Select

相关QA: React Material UI Tooltips Disable Animation

---

解决方案

覆盖transition样式即可。

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

---

---

解释

选项的HTML结构：

由于它是在主组件之外动态生成的，因此我们无法直接为其设置样式。

但是，我们可以通过那些类名（如MuiPaper-root）或其他方式（如给定的ID）选择性地覆盖样式。

<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>;

- keikai

---

好的回答，就像问其他回答者一样，是否也有输入延迟？因为即使现在也需要一秒钟才能出现...我想让它完全流畅... - Divyansh Goenka

@DivyanshGoenka 发布另一个帖子并附上在线演示将满足您的需求。 - keikai

Answer 3

对于那些正在使用相应的Material UI InputLabel组件与mui Select组件的人，我能够传递以下属性到InputLabel组件中，以完全禁用动画和收缩：

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

MUI输入标签API

- David Tahvildaran

Answer 4

除了keikai的回答，你还可以通过更改主题来全局执行此操作：

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

- Kevin Reilly