material UI 如何通过根组件更改子元素的样式？

Question

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

更具体地说，根组件有一个 class 叫做 MuiTreeItem-root，在这个 div 里面有一个 class 叫做 MuiTreeItem-content。这就是我想覆盖的内容。可能吗？

提前致谢

Answer 1

您可以通过为您的 MiuTreeItem-Component 提供一个 classname 来轻松做到这一点：

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

这样，您的每个 TreeItem 节点都可以具有不同的样式。在您的 css 中，您可以照常指定 class：

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

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

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

为了仅设置根元素的样式而不设置其子元素：

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

看到它在这里工作： https://codesandbox.io/embed/heuristic-fire-iwx8l

Answer 2

从技术上讲，"classes" 是一个 props，因此您需要做的是迭代 TreeItem 的所有 children（如果有）并传递 "classes" 对于他们中的每一个。

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

material UI 如何通过根组件更改子元素的样式？

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

reactjs

material-ui

jss