reactjs - 在 TreeView 中设置选定的 TreeItem 样式

Question

我正在尝试覆盖 Material-UI TreeView 组件中所选 TreeItem 的样式。根据 CSS API 文档，有一个 selected选择器，但是当我使用它时，我看到整个子树都被设置了样式，而不仅仅是选定的项目。
用于仅设置选定树项样式的正确选择器是什么？
代码沙箱:https://codesandbox.io/s/nostalgic-flower-e85cd?file=/src/App.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import MuiTreeItem from "@material-ui/lab/TreeItem";
import { withStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    height: 240,
    flexGrow: 1,
    maxWidth: 400
  }
});

const TreeItem = withStyles({
  selected: {
    color: "red"
  }
})(MuiTreeItem);

export default function FileSystemNavigator() {
  const classes = useStyles();

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="Applications">
        <TreeItem nodeId="2" label="Calendar" />
        <TreeItem nodeId="3" label="Chrome" />
        <TreeItem nodeId="4" label="Webstorm" />
      </TreeItem>
      <TreeItem nodeId="5" label="Documents">
        <TreeItem nodeId="10" label="OSS" />
        <TreeItem nodeId="6" label="Material-UI">
          <TreeItem nodeId="7" label="src">
            <TreeItem nodeId="8" label="index.js" />
            <TreeItem nodeId="9" label="tree-view.js" />
          </TreeItem>
        </TreeItem>
      </TreeItem>
    </TreeView>
  );
}

Answer 1

当您对如何覆盖默认 Material-UI 样式有疑问时，最好的资源是查看默认样式是如何定义的。
以下是 default styles for TreeItem 中最相关的部分:

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    '&$selected > $content $label': {
      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
    },
    '&$selected > $content $label:hover, &$selected:focus > $content $label': {
      backgroundColor: fade(
        theme.palette.primary.main,
        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
      ),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Pseudo-class applied to the root element when selected. */
  selected: {},
  /* Styles applied to the tree node content. */
  content: {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  /* Styles applied to the label element. */
  label: {
    '&:hover': {
      backgroundColor: theme.palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
});

整体 structure of TreeItem (也可以通过查看源码找到)如下(略有简化):

<li className={clsx(classes.root, className, {[classes.selected]: selected})}>
   <div className={classes.content}>
      <div className={classes.iconContainer}>
         {icon}
      </div>
      <Typography component="div" className={classes.label}>
         {label}
      </Typography>
   </div>
   {children}
</li>

在上面的结构中，您可以看到 selected类位于根元素上，它是一个 <li>围绕着特定于此 TreeItem 的内容以及它的 child 。 TreeItem 自己的内容在 <div> 中与 content类，该 div 包含图标和标签。
您可以定位 content div如下:

const TreeItem = withStyles({
  root: {
    "&.Mui-selected > .MuiTreeItem-content": {
      color: "red"
    }
  }
})(MuiTreeItem);

这相当于:

const TreeItem = withStyles({
  root: {
    "&$selected > $content": {
      color: "red"
    }
  },
  selected: {},
  content: {}
})(MuiTreeItem);

如果您不想在样式中包含图标，那么您可以在内容中定位标签:

const TreeItem = withStyles({
  root: {
    "&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": {
      color: "red"
    }
  }
})(MuiTreeItem);

这相当于:

const TreeItem = withStyles({
  root: {
    "&$selected > $content $label": {
      color: "red"
    }
  },
  selected: {},
  content: {},
  label: {}
})(MuiTreeItem);

如果要更改背景颜色，则需要注意默认样式中的更多细节(因为默认样式对背景颜色影响很大)，以便适当处理悬停和聚焦状态。