Material UI TreeView标签字体大小修改后刷新失效问题求助

问题现象 #

使用Material UI TreeView组件时，在TreeItem的sx属性中自定义标签字体大小，仅在项目启动后修改代码并保存（热重载）时能看到效果，关闭项目或刷新页面后自定义样式完全消失。相关代码示例：

<TreeItem
  key={mainCategory.name}
  nodeId={mainCategory.name}
  label={mainCategory.name}
  disabled={
    !mainCategory.department?.includes(employee?.currentUser?.role!) &&
    !mainCategory.department?.includes("all")
  }
  sx={{
    paddingBottom: "1rem",
    fontSize: "1.9rem",
    "& .MuiTreeItem-label": {
      fontSize: "1.8rem",
    },
  }}
>
  {renderSubCategories(mainCategory.name)}
</TreeItem>

完整组件代码如下：

interface ChildProps {
  accordianCat: Categories[];
}

const TreeViewComp = ({ accordianCat }: ChildProps) => {
  const { employee } = useTypedSelector((state) => state);
  const { allEmployees } = useTypedSelector((state) => state);

  const handleClick = (name: string, department: string) => {
    console.log(name, department);
  };

  const renderSubCategories = (mainCategoryName: string) =>
    accordianCat
      .filter(
        (category) =>
          category.type === "sub" &&
          category.department?.includes(mainCategoryName)
      )
      .map((subCategory) =>
        subCategory.name === "Employees" ? (
          allEmployees?.allEmployeesData
            ?.filter((employee) => employee.role === mainCategoryName)
            .map((employee) => (
              <TreeItem
                key={employee.name}
                nodeId={employee.uuid}
                label={`${fullName(employee)}`}
                sx={{
                  paddingBottom: "0.8rem",
                  "& .MuiTreeItem-label": {
                    fontSize: "1.8rem",
                  },
                }}
              />
            ))
        ) : (
          <TreeItem
            key={subCategory.name}
            nodeId={subCategory.name}
            label={subCategory.name}
            sx={{
              paddingBottom: "0.8rem",
              "& .MuiTreeItem-label": {
                fontSize: "1.8rem",
              },
            }}
          />
        )
      );

  const renderMainCategories = () =>
    accordianCat
      .filter((category) => category.type === "main")
      .map((mainCategory) => (
        <TreeItem
          key={mainCategory.name}
          nodeId={mainCategory.name}
          label={mainCategory.name}
          disabled={
            !mainCategory.department?.includes(employee?.currentUser?.role!) &&
            !mainCategory.department?.includes("all")
          }
          sx={{
            paddingBottom: "1rem",
            fontSize: "1.9rem",
            "& .MuiTreeItem-label": {
              fontSize: "1.8rem",
            },
          }}
        >
          {renderSubCategories(mainCategory.name)}
        </TreeItem>
      ));

  return (
    <TreeView
      aria-label="file system navigator"
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      sx={{
        height: 240,
        flexGrow: 1,
        maxWidth: 400,
        overflowY: "auto",
      }}
    >
      {renderMainCategories()}
    </TreeView>
  );
};

export default TreeViewComp;

原因分析 #

核心问题是CSS样式优先级冲突：Material UI内置的TreeItem标签样式优先级高于你通过sx添加的内联样式。热重载时样式加载顺序临时改变，自定义样式暂时生效；刷新或重启项目后，内置样式正常加载并覆盖了自定义样式。

解决方案 #

方案1：使用styled组件创建自定义TreeItem #

通过Material UI的styled工具创建带有固定样式的TreeItem组件，确保样式优先级高于内置样式：

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

// 子分类/员工项的样式
const StyledTreeItem = styled(TreeItem)(() => ({
  paddingBottom: '0.8rem',
  '& .MuiTreeItem-label': {
    fontSize: '1.8rem',
  },
}));

// 主分类的专属样式
const MainTreeItem = styled(TreeItem)(() => ({
  paddingBottom: '1rem',
  '& .MuiTreeItem-label': {
    fontSize: '1.9rem',
  },
}));

替换组件中的原有TreeItem：

// 主分类使用MainTreeItem
<MainTreeItem
  key={mainCategory.name}
  nodeId={mainCategory.name}
  label={mainCategory.name}
  disabled={
    !mainCategory.department?.includes(employee?.currentUser?.role!) &&
    !mainCategory.department?.includes("all")
  }
>
  {renderSubCategories(mainCategory.name)}
</MainTreeItem>

// 子分类和员工项使用StyledTreeItem
<StyledTreeItem
  key={employee.name}
  nodeId={employee.uuid}
  label={`${fullName(employee)}`}
/>

方案2：提升sx选择器的特异性 #

在sx属性中使用更具体的选择器，确保自定义样式优先级更高：

sx={{
  paddingBottom: "1rem",
  // 增加父级选择器提升特异性
  '&.MuiTreeItem-root .MuiTreeItem-label': {
    fontSize: '1.9rem',
  },
}}

方案3：全局主题覆盖 #

在项目的主题配置文件中全局修改TreeItem的默认样式：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        // 全局默认标签字体大小
        label: {
          fontSize: '1.8rem',
        },
        // 全局默认根节点内边距
        root: {
          paddingBottom: '0.8rem',
        },
        // 主分类专属样式，需给主TreeItem添加className="main-tree-item"
        '&.main-tree-item': {
          paddingBottom: '1rem',
          '& .MuiTreeItem-label': {
            fontSize: '1.9rem',
          },
        },
      },
    },
  },
});

然后给主分类TreeItem添加对应的类名：

<TreeItem
  className="main-tree-item"
  // 其他属性保持不变
>

验证方式 #

修改完成后重启项目或刷新页面，检查TreeItem的字体大小是否保持自定义值，同时确认热重载时样式依然正常生效。

内容的提问来源于stack exchange，提问作者Hamzah Hameed