Как переопределить значения стиля по умолчанию накомпонент Material-UI при использовании другого HOC через compose ()?

Question

Я создаю вложенный список в приложении React с использованием material-ui.Значение по умолчанию для отступа свойства inset - большое (56 пикселей), поэтому я пытаюсь переопределить это значение по умолчанию.Но я не могу.

Я использую withStyles () для подачи стилей в компонент React на основе классов.Но этот HOC также связан с connect () (redux) и withTranslation () (react-i18next) с использованием connect () (response-redux).

Вместо переопределения класса MuiListItemText-inset-125, другойклассы вставляются в DOM на основе дополнительных HOC:

Так что проблема в том, что я не могу переопределить значение вставки по умолчанию.

Я былпопытка переопределения с использованием классов в соответствии с документацией material-ui по адресу:

https://material -ui.com / customization / components / # overriding-styles-with-classes

и

https://material -ui.com / api / list-item-text /

Однако значение, которое я предоставляю для отступа влевопо умолчанию превосходит 56px.

Я также пытался передать компонент в качестве опции с withStyles (), но он по-прежнему создает другой класс вставки вместо перезаписи по умолчанию.

export default compose(
  withStyles(styles, { name: 'TrainingPage' }),
  connect(mapStateToProps),
  withTranslation()
)(TrainingPage);

<div class="MuiListItemText-root-124 MuiListItemText-inset-125 TrainingPage-inset-3">

const styles = (theme) => {
  return {
    toolbar: theme.mixins.toolbar,
    linearProgress: {
      minWidth: '50%'
    },
    inset: { paddingLeft: 8 },
    level1: {
      backgroundColor: '#ebf1f7'
    },
    level2: {
      backgroundColor: '#cad4de'
    }
  };
};

class TrainingPage extends React.Component {

...

render() {
    const { classes, t, programs } = this.props;
    const { openInitialTraining, openExtendedTraining, openTutorTraining, showModules } = this.state;
    return (
      <React.Fragment>
        <NavBar navTitle={t('training-title')} toggleDrawer={this.props.toggleDrawer} />
        <div className={classes.toolbar} />
        <List>
          {programs.map((program) => {
            let open;
            if (program.fields.programTitle === 'Initial Training') {
              open = openInitialTraining;
            } else if (program.fields.programTitle === 'Extended Training') {
              open = openExtendedTraining;
            } else {
              open = openTutorTraining;
            }

            return (
              <React.Fragment>
                <ListItem
                  key={program.sys.id}
                  onClick={() => {
                    this.toggleOpenProgram(program.sys.id);
                  }}
                  divider
                  dense={true}
                >
                  <ListItemText
                    disableTypography={true}
                    primary={<Typography variant="h5">{program.fields.programTitle}</Typography>}
                    secondary={
                      <Grid container wrap="nowrap" direction="row" alignItems="center" justify="space-between">
                        <Typography variant="overline">Completion</Typography>
                        <LinearProgress
                          className={classes.linearProgress}
                          variant="determinate"
                          value={45}
                          color="secondary"
                        />
                        <Typography variant="overline">45%</Typography>
                      </Grid>
                    }
                  />

                  {open ? <ExpandLess /> : <ExpandMore />}
                </ListItem>
                <Collapse in={open} timeout="auto" unmountOnExit>
                  <List className={classes.level1}>
                    {program.fields.programCourses.map((course) => {
                      const modules = course.fields.courseModules;
                      return (
                        <React.Fragment>
                          <ListItem
                            key={course.sys.id}
                            onClick={() => {
                              this.toggleShowModules();
                            }}
                            divider
                          >
                            <ListItemText primary={course.fields.courseTitle} />
                            {showModules ? <ExpandLess /> : <ExpandMore />}
                          </ListItem>
                          <Collapse in={showModules} timeout="auto" unmountOnExit>
                            <List className={classes.level2}>
                              {modules.map((module) => {
                                return (
                                  <ListItem key={module.sys.id}>
                                    <ListItemText
                                      primary={module.fields.moduleTitle}
                                      inset
                                      classes={{ inset: classes.inset }}
                                    />
                                  </ListItem>
                                );
                              })}
                            </List>
                          </Collapse>
                        </React.Fragment>
                      );
                    })}
                  </List>
                </Collapse>
              </React.Fragment>
            );
          })}
        </List>
      </React.Fragment>
    );
  }
}

const mapStateToProps = ({ training: { programs } }) => {
  return {
    programs: programs
  };
};

export default compose(
  withStyles(styles, { name: 'TrainingPage' }),
  connect(mapStateToProps),
  withTranslation()
)(TrainingPage);

CSS должен быть представлен как:

.MuiListItemText-inset-125:first-child {
    padding-left: 8px;
}

, но вместо этого онв виде:

.MuiListItemText-inset-125:first-child {
    padding-left: 56px;
}

.TrainingPage-inset-3 {
    padding-left: 8px;  
}

или

.MuiListItemText-inset-125:first-child {
    padding-left: 56px;
}

.Connect-withI18nextTranslation-TrainingPage---inset-3 {
    padding-left: 8px;
}