Удаление дополнительного пространства, когда панель расширения открывается в Material-UI

Question

Я хочу убрать лишний пробел при нажатии на второй аккордеон в пользовательском интерфейсе материала.Я вижу, что, когда мы нажимаем на второй аккордеон, он движется вниз, но между первым и вторым аккордеоном возникает разрыв.Можем ли мы убрать этот дополнительный пробел при открытии второго аккордеона?

Вот ссылка на коды и ящик.https://codesandbox.io/s/yp9lmvwo1x

Answer 1

Лучше всего переопределить стиль по умолчанию CSS с классами . Встроенный API поможет вам создавать условные стили на основе компонента. В частности, документы показывают классы, которые вы можете изменить на панели расширения .

Используя ваш код песочницы в качестве справки:

1. Сначала вы добавляете «расширенные» в ваши стили

const styles = theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  },
  expanded: {
    margin: "0 auto"
  }
});

2. Затем вы указываете CSS для <ExpansionPanel /> компонента

...
<ExpansionPanel classes={{ expanded: classes.expanded }}>
...

( Fixed CodeSandbox )

Теперь все должно работать как положено, и вы даже можете расширить стиль, добавив объект на первом этапе.