Блог

Я пытаюсь прокрутить горизонтально внутри компонента ящика из Material-UI. Он отлично работает за пределами ящика, но не внутри него.

Я протестировал его везде, где только мог, и он работает, но он не работает в Safari на iPhone. Я пробовал как на физическом устройстве, так и на симуляторе.

https://codesandbox.io/s/material-demo-forked-qqdo2?file=/demo.js

 function Scroller() {
  return (
    <Box overflow="hidden" bgcolor="primary.main">
      <Box display="flex" overflow="auto hidden">
        {[...new Array(50)].map((_, i) => (
          <Box key={i} p={1}>
            <Chip label="Test Chip" color="secondary" />
          </Box>
        ))}
      </Box>
    </Box>
  );
}

 

По крайней мере, удалось найти обходной путь. Кажется, что-то с SwipeableDrawer отключением прокрутки. Переключение на Drawer вместо этого работает просто отлично.

Я обновил пример, чтобы показать оба ящика.

Попробуйте использовать display: unset !important , у меня это сработало. Пример:

 .MuiDrawer-paper {
    display: unset !important;
}