Reactjs 如何在材质UI中按根组件更改子元素的样式？

我有一个由MaterialUI提供的组件，当我使用withStyles将我的样式作为类名传递给组件时，整个组件都被设置了样式。我想更改子元素的样式，而不是根元素

更具体地说，根组件有一个名为MuiTreeItem root的类，在这个div中有一个名为MuiTreeItem content的类。这就是我想要推翻的。可能吗

---

提前感谢

通过为MiuTreeItem组件提供类名，您可以轻松完成此操作：

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

要仅设置根元素而不设置其子元素的样式，请执行以下操作：

看到它在这里工作：

---

通过为MiuTreeItem组件提供类名，您可以轻松完成此操作：

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

要仅设置根元素而不设置其子元素的样式，请执行以下操作：

看到它在这里工作：

从技术上讲，“类”是一个

道具，因此您需要做的是迭代
树项的所有子项（如果有）并为每个子项传递“类”

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

export const TreeItem=（{children，classes}）=>{
返回(
{React.Children.map（Children，child=>
克隆元素（儿童{
班级：班级
})
)}
);
};
从技术上讲，“类”是一个
道具
，因此您需要做的是迭代
树项的所有子项
（如果有）并为每个子项传递“类”

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

export const TreeItem=（{children，classes}）=>{
返回(
{React.Children.map（Children，child=>
克隆元素（儿童{
班级：班级
})
)}
);
};
我指的内部元素不是另一个树元素，而是同一个项目。我想设置一个div的样式，它不是根div，而是根的子元素，因为如果我设置根的样式，所有的子元素都将被设置样式，我不希望只有一个子元素。我指的内部元素不是另一个treeItem，而是同一个项。我想设计一个不是根div的div，而是根的子div，因为如果我设计根的样式，所有的子div都将被设计，我不想这样，只有一个子div。