настройка панели расширения в пользовательском интерфейсе материала и перезапись стилей - PullRequest
Новая
       11

настройка панели расширения в пользовательском интерфейсе материала и перезапись стилей

1 голос
/ 04 апреля 2019

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

   <ExpansionPanel   defaultExpanded={isCurrentInning}>
        <ExpansionPanelSummary  classes={{ expanded:classes.expandedPanel }} expandIcon={<ExpandMoreIcon className="label"/>}>
          <div className={classes.inningInfoContainer}>
            <div className={classes.teamNameOrderContainer}>
              <span  className="label">
                 <img   src={image} width="25em" />
                 <span > {battingTeamName}</span>
              </span>
            </div>
    // closing tags of ExpansionPanel and ExpansionPanelSummary

Я вижучто панель расширения имеет этот стиль по умолчанию 

 MuiExpansionPanelSummary-root-209 {
     display: flex;
     padding: 0 24px 0 24px;
     min-height: 48px;
transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1)           0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

Я хочу переписать эти стили по умолчанию.Вот простой код на коды andboxlink https://codesandbox.io/s/yp9lmvwo1x

1 Ответ

1 голос
/ 04 апреля 2019

Примеры переопределения стилей ExpansionPanelSummary можно найти в документации здесь: https://material -ui.com / demos / extension-panel / # custom-extension-panel

Длячтобы понять более подробно, как правильно переопределить эти стили, полезно взглянуть на исходный код для ExpansionPanelSummary , чтобы увидеть, как определяются стили по умолчанию.

Вот сокращенное обозначениеверсия стилей по умолчанию, которая включает только части, влияющие на высоту: 

export const styles = theme => {
  return {
    /* Styles applied to the root element. */
    root: {
      minHeight: 8 * 6,
      '&$expanded': {
        minHeight: 64,
      },
    },
    /* Styles applied to the root element if `expanded={true}`. */
    expanded: {},
    /* Styles applied to the children wrapper element. */
    content: {
      margin: '12px 0',
      '&$expanded': {
        margin: '20px 0',
      },
    },
  };
};

Затем можно создать собственный настраиваемый компонент сводки, который переопределяет эти стили, например: 

const summaryStyles = {
  root: {
    minHeight: 8 * 4,
    "&$expanded": {
      minHeight: 8 * 4
    }
  },
  content: {
    margin: "8px 0",
    "&$expanded": {
      margin: "8px 0"
    }
  },
  expanded: {}
};
const CompactExpansionPanelSummary = withStyles(summaryStyles)(props => {
  return <ExpansionPanelSummary {...props} />;
});
CompactExpansionPanelSummary.muiName = "ExpansionPanelSummary";

Вы можете найти подробную информацию о том, почему свойство muiName необходимо здесь: Как я могу переопределить глубокие элементы ExpansionPanelSummary с помощью styled-компонентов?

Вот рабочий пример, основанный на изолированной программной среде, которую вывключены в ваш вопрос:

Edit Compact ExpansionPanelSummary

...