问在TreeView中设置选定TreeItem的样式
EN

Stack Overflow用户

提问于 2020-06-29 15:10:29

回答 2查看 5.2K关注 0票数 3

我正在尝试覆盖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>
  );
}

reactjs

material-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-30 14:18:23

当您有关于如何覆盖默认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的内容及其子元素。TreeItem自己的内容在包含content类的<div>中，该div包含图标和标签。

您可以将content目录作为目标，如下所示：

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

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

票数 8

Stack Overflow用户

发布于 2021-06-08 04:25:39

从“@material-ui/ MuiTreeItem /TreeItem”导入实验室；

从“@material-ui/ withStyles /styles”中导入{withStyles}；

const TreeItem = withStyles({

    root: {
      "&.Mui-selected > .MuiTreeItem-content": {
        background: "#89CFF0"
      },
      "&.MuiTreeItem-root > .MuiTreeItem-content:hover": {
        background: "gray",
      },
      "&.MuiTreeItem-root > .MuiTreeItem-content:hover > .MuiTreeItem-label": {
        background: "#89CFF0",
      },
      
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    }

  })(MuiTreeItem);