I'm styling a nested list in a React app using material-ui. The default "inset" property padding is to large (56px) so I'm trying to override that default value. But I can't.

I'm using withStyles() to feed the styles into a class-based React component. But that HOC is also coupled with connect() (redux) and withTranslation() (react-i18next) using connect() (react-redux).

Rather than overriding the MuiListItemText-inset-125 class, other classes are getting inserted into the DOM based on the extra HOCs:

So the problem is that I can't override the default inset value.

I've being trying to override using classes, as per the material-ui documentation at:

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

and

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

However, the value I'm providing for padding-left is getting trumped by the default 56px.

I've also tried passing in the component as an option to withStyles(), but it's still creating a different inset class rather than overwriting the default.

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);

The css should be rendered as:

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

but instead it's being rendered as:

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

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

or

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

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

0 Answers