如何在树中选择父元素而不丢失孩子的“选定”样式答案

【问题标题】：How to select a parent element in tree and not lose child's 'selected' styles如何在树中选择父元素而不丢失孩子的“选定”样式
【发布时间】：2022-07-18 17:54:06
【问题描述】：

我有一个 MUI TreeView 组件，其中包含类别（父）和文章（子）的嵌套映射。当我选择一个孩子时，该孩子会根据“选定”应用样式。当我单击父级时，前一个子级会丢失其“选定”样式。

如何区分“选中的子”和“选中的父（选中）”。

如果可能的话，我更愿意在 CSS 中完成这一切。这是一个 Next.js 应用程序。

我的 CategoryItem CSS：

const StyledCategoryItemRoot = styled(TreeItem)(({ theme }) => ({
  [`& .${treeItemClasses.content}`]: {
    fontWeight: theme.typography.fontWeightBold,
    marginBottom: 5,
    paddingLeft: 0,
    borderRadius: theme.shape.borderRadius,
    '&.Mui-selected.Mui-focused, &:hover, &.Mui-selected:hover': {
      backgroundColor:
        theme.palette.mode === 'light'
          ? alpha('#ff9aff', 0.16)
          : alpha('#2f506f', 0.24),
    },
    '&.Mui-selected, &.Mui-focused': {
      backgroundColor: 'transparent',
    },
  },
}));

我的 ArticleItem CSS：

const StyledArticleItemRoot = styled(TreeItem)(({ theme, router, post }) => ({
  color:
    theme.palette.mode === 'light'
      ? theme.palette.grey[900]
      : theme.palette.grey[500],
  [`& .${treeItemClasses.content}`]: {
    fontWeight: theme.typography.fontWeightBold,
    paddingLeft: 0,
    borderRadius: theme.shape.borderRadius,
    transition: '.2s',
    '&.Mui-selected:hover, &.Mui-selected.Mui-focused:hover, &:hover': {
      color: theme.palette.mode === 'light' ? theme.palette.grey[800] : 'white',
    },
    '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {
      backgroundColor:
        theme.palette.mode === 'light'
          ? alpha('#ff9aff', 0.16)
          : alpha('#2f506f', 0.16),
      color:
        post.attributes.slug !== router.query.slug
          ? theme.palette.grey[500]
          : theme.palette.mode === 'light'
          ? theme.palette.primary.main
          : theme.palette.secondary.main,
    },
  },
}));

【问题讨论】：

您是说要阻止选择类别吗？
我希望能够单击“类别”下拉菜单，而不会丢失文章上的“选定”样式。当文章被“选中”样式={{颜色：{颜色}背景：{背景}}}时，当我单击类别时，文章的颜色恢复为“未选中”样式。工作示例检查 mui.com/material-ui/getting-started/installation 的侧边栏功能。我现在所做的示例（或多或少）在此处查看“Gmail 克隆”：mui.com/material-ui/react-tree-view/#main-content
那是因为此时不再选择文章。而是选择了类别。

标签： javascript css next.js material-ui treeview

【解决方案1】：

在 MUI 树视图组件中，如果多选关闭 multiSelect={false} 只能选择一个节点（父节点或子节点），不能同时选择父节点和子节点！

因此，如果您选择子节点然后选择父节点，则子节点将失去所选节点样式，因为它不再是未选择！

在 cmets 中回答您的问题：

我希望能够单击“类别”下拉菜单而不会丢失文章上的“选定”样式。

你可以通过以下方式做到这一点：手动处理节点选择

<TreeView
   aria-label="file system navigator"
   key="treeView"
   defaultCollapseIcon={<ExpandMoreIcon />}
   defaultExpandIcon={<ChevronRightIcon />}
   multiSelect={false}
   selected={selectedNodes}
   onNodeSelect={(e, node_ids) => {
     handleClick(e, node_ids);
   }}> //add here tree nodes 
</TreeView>

现在在 handleClick 函数中，您将设置选定的节点：

setSelectedNodes(nodes_ids);

仅如果点击的元素是节点标签并且不是下拉菜单也不是可折叠图标

所以 handleClick 看起来像这样：

 function handleClick(e, nodes_ids) {
  if (e.target.className == "MuiTreeItem-label") 
   setSelectedNodes(nodes_ids);
}

【讨论】：