如何摆脱 Material-UI TreeView 中的水平滚动条？

Question

当尝试 Tree View (@mui/lab/TreeView) 的 Material-UI 基本示例时，我不知道如何在组件的 prop中使用overflowY: "auto"(即使我使用，效果相同overflow: "auto") 选项来删除水平滚动条。无论右侧有多少可用空间，水平滚动条都会出现。我想保留该选项，以防垂直溢出。sxTreeViewoverflowY

例如，请参阅 StackBlitz 或 CodeSandbox 中官方Material-UI 页面的基本树视图示例。

不需要时如何删除水平滚动条？

Answer 1

发生这种情况是因为 CSS 类.MuiTreeItem-content及其子类.MuiTreeItem-label默认设置为 100% 宽度，因此，.MuiTreeItem-contentx 轴上的 8px 填充（也是默认值）会妨碍，增加了 16px 太多。.MuiTreeItem-content您可以通过将的类填充设置为 0 来轻松覆盖此设置。

// ...

import MuiTreeItem from "@mui/lab/TreeItem";
import { styled } from "@mui/material/styles";

const TreeItem = styled(MuiTreeItem)(({ theme }) => ({
  "& .MuiTreeItem-content": {
    padding: 0,
  },
}));

// ...