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