material UI - 如何更改树视图中标签的字体大小

Question

所以我正在使用 material ui treeview ，并且我在每个 treeItem 上添加了我自己的 fontSize，如您在部分中所见

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

问题是，一旦我使用 npm start 运行项目，更改字体大小并按 ctrl+s，我只能看到更新的字体大小，现在如果我关闭项目或点击刷新，我的样式将被删除。我在下面提供了完整的文件

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;

Answer 1

1>> Create your custom styles e.g. const useStyles = makeStyles(() => ({ label: { fontSize: '0.8em' } }));
2>> Apply it to the FormControlLabel.