Реакция Как убрать анимацию Material-UI Select

Question

Я использую пользовательский интерфейс выбора материала React Material. sh, чтобы удалить или ускорить анимацию, которая появляется при открытии меню. Я пробовал что-то вроде:

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

Но это не работает, пожалуйста, помогите

Answer 1

Причина, по которой он не работает:

MUI <Select /> API не имеет реквизита TransitionComponent , а также некоторые другие компоненты, такие как <Tooltip /> имеют

См. Документ API

• MUI Подсказка

• MUI Выбрать

Связанные QA: React Material UI Tooltips Отключить анимацию

---

Решение

Переопределить переход стиль будет в порядке.

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

---

---

Пояснение

Структура HTML для опций :

Поскольку он был сгенерирован динамически вне основного компонента, мы не можем напрямую устанавливать для них стили.

Однако мы можем при желании переопределить стили этими именами классов, такими как MuiPaper - root или некоторые другие способы, такие как заданный идентификатор.

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

добавьте это в свою таблицу стилей:

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

Это в основном переопределяет продолжительность перехода выпадающего списка и устанавливает ее равной 0 секундам.

Вы также можете изменить продолжительность в соответствии с тем, что тебе нравится (сделай это быстрее). Продолжительность анимации по умолчанию:

transition-duration: 251ms, 167ms;