我正在使用 React Material UI 的选择组件。我希望删除或加速菜单打开时出现的动画。我试过类似的东西：
<Select
...
TransitionComponent={({children}) => children}
>
<MenuItem value={...}>...</MenuItem>
...
</Select>
但这不起作用，请帮助
React 如何去除Material-UI Select的动画
IT技术
javascript
html
css
reactjs
material-ui
2021-05-12 00:25:09
4个回答
将此添加到您的样式表中：
.MuiMenu-paper {
transition-duration: 0s !important;
}
这基本上覆盖了选择下拉列表的转换持续时间并将其设置为 0 秒。
您还可以根据自己的喜好更改持续时间（使其更快）。默认动画持续时间为：
transition-duration: 251ms, 167ms;
不起作用的原因：
MUI <Select />API 没有propsTransitionComponent，以及其他一些组件，例如<Tooltip />有
参考：API文档
相关 QA：React Material UI 工具提示禁用动画
解决方案
覆盖过渡样式就可以了。
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>;
对于那些使用InputLabel带有 muiSelect组件的相应 Material UI组件的人，我能够将以下props传递给该InputLabel组件以禁用动画并完全收缩：
<div>
<FormControl>
<InputLabel
disableAnimation={true}
shrink={false}
...
>
{`some label`}
</InputLabel>
<Select>
{`...`}
</Select>
</FormControl>
</div>
要添加 keikai 的答案，您还可以通过主题更改在全局范围内执行此操作：
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
transition: 'none !important'
},
},
}
});