уменьшение размера панели расширения в материале

Question

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

Вот песочница.https://codesandbox.io/s/yp9lmvwo1x Я в основном хочу уменьшить размер синей части в первом аккордеоне.

Answer 1

Вы можете сделать это, используя withStyles HOC, предоставленный material-ui.

const CustomExpansionPanel = withStyles(() => ({
  root: {
    width: "100%",
  },
  expanded: {
    height: "110px"
  }
}))(ExpansionPanel);

Однако вам также придется настроить внутренние ExpansionPanelSummary и ExpansionPanelDetails, если вы их используете.

Вот рабочий пример для выше: https://codesandbox.io/s/nr65w2qwp4