Question

我有一个由材质UI提供的组件，当我使用withStyles将样式作为类名传递给该组件时，将对整个组件进行样式设置。我想更改子元素的样式，而不是根。

更具体地说，根组件有一个名为MuiTreeItem-root的类，在此div内有一个名为MuiTreeItem-content的类。这就是我要覆盖的内容。有可能吗？

预先感谢

Answer 1

您可以通过为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>

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

.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

从技术上讲，“类”是ReactDOM.render(<EditProfileForm data={dataProp} onSubmit={onSubmitProp} />, container);，因此您需要对props的所有子类（如果有）进行迭代，并为每个子类传递“类”。

TreeItem

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

2 个答案: