How to change style of child element by root component in material UI?

0
votes

I have a component provided by material UI, When I pass my style as a classname to the component using withStyles, the entire component is styled. I would like to change the style of a child element, not the root.

More especifically, the root component has a class called MuiTreeItem-root, and inside this div there is a class called MuiTreeItem-content. That is what I would like to override. Is it possible?

Thanks in advance

2
reactjsmaterial-uijss

2 Answers

2
votes

You can easily do it via providing a classname to your MiuTreeItem-Component:

<TreeView>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem classes={{ root: 'own-style-1' }} nodeId="2" label="Calendar" />
    <TreeItem classes={{ root: 'own-style-2' }} nodeId="3" label="Chrome" />
    <TreeItem classes={{ root: 'own-style-3' }} nodeId="4" label="Webstorm" />
  </TreeItem>
</TreeView>

This way, each of your TreeItem nodes can have a different styling. In your css you can specify the class as usual:

.own-style-1 {
  background: #ff0099 !important;
  color: #ffffff;
}

.own-style-2 {
  background: #003399 !important;
  color: #ffffff;
}

.own-style-3 {
  background: #ee5532 !important;
  color: #ffffff;
}

In order to style only the root element without its child elements:

<TreeItem classes={{ content: 'own-style-1' }} nodeId="1" label="Applications">
  <TreeItem nodeId="2" label="Calendar" />
  <TreeItem nodeId="3" label="Chrome" />
  <TreeItem nodeId="4" label="Webstorm" />
</TreeItem>

See it working here: https://codesandbox.io/embed/heuristic-fire-iwx8l

0
votes

Technically "classes" is a props so what you need to do is to iterate on all children of TreeItem (if any) and pass "classes" for each one of them.

export const TreeItem = ({ children, classes }) => {
  return (
    <div>
      {React.Children.map(children, child =>
        cloneElement(child, {
          classes: classes
        })
      )}
    </div>
  );
};