如何在 AccordionDetails 中设置 maxHeight 并使其可滚动？

Question

I have 100's of data to show using Accordion (material-ui) inside a Box component, but not sure how to manipulate the built in styles to set the maxHeight. Is there a way that I can control the styles instead of showing all movies when the dropdown is clicked?

Sandbox link

Answer 1

Add this style in your css file and make height according your requirement, it works!

.MuiAccordionDetails-root {
  max-height: 300px;
  overflow-y: scroll;
}

codesandbox link: https://codesandbox.io/s/react-typescript-forked-pc3udc?file=/src/styles.css:59-132

Answer 2

I have created the answer with sandbox. url I have used sx prop and overflowy to scroll.