Material-ui: Nested classes, overrides and theme question

[fondberg]

I would like to be able to define nested class objects to keep things together and would like to know if this is doable.
Example (look for classes={ classes.myExpansionPanel }):

const codeStyles = (theme) => ({
  myExpansionPanel: {
    root: {
      padding: theme.spacing.unit,
    },
    expanded: {
      minHeight: theme.spacing.unit * 6,
      background: theme.palette.background.default
    },
  myOtherComponent: {
    root: {}
    otherOverriddenKey: {}
  }
});

withStyles(codeStyles)((props) => {
  return (
    <ExpansionPanel>
      <ExpansionPanelSummary classes={ classes.myExpansionPanel }>
        {title}
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
         details
      </ExpansionPanelDetails>
    </ExpansionPanel>
   );
});

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

would like to know if this is doable.

No, it's not. The style objet needs to be flat. Instead, you can wire the classes as you see fit in the render method.

[paulcredmond]

How about for a case like this:

<NavLink to={'/dashboard'} activeClassName={classes.active}
  <button className="btn">Link</button>
/>

  active: {
    btn: {
      backgroundColor: '#2A354F'
    }  
  }

Have can I achieve that?

[nartc]

How about for a case like this:

<NavLink to={'/dashboard'} activeClassName={classes.active}
  <button className="btn">Link</button>
/>

  active: {
    btn: {
      backgroundColor: '#2A354F'
    }  
  }

Have can I achieve that?

I guess I'm a bit late to this but you can achieve that by:

active: {
   '& .btn': {
             ...
    }
}

[andrewjrhill]

What about cases like this?

<NavLink to={'/dashboard'} activeClassName={classes.active}
    <Button className={classes.btn}>Link</Button>
/>

Using either of the following fails:

active: {
    '& $btn': {
        ...
    }
}

-and-

active: {
    '& .btn': {
        ...
    }
}

---

As a temporary work around I am using classnames and passing the same className to the child, but this is awfully redundant.

<NavLink to={'/dashboard'} activeClassName={classes.active}
    <Button className={classNames(classes.btn, 'btn')}>Link</Button>
/>

[diegovillacis10]

We had the same problem and we made it work with this:

active: {
    '& $btn': {
        ...
    }
}

[afroguy16]

We had the same problem and we made it work with this:

active: {
    '& $btn': {
        ...
    }
}

This works. But wtf does it work?