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

46scxncf  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(151)

因此,我使用的是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开始,改变字体大小,并按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;
bgtovc5b

bgtovc5b1#

1.创建您的自定义样式,例如

const useStyles = makeStyles(() => ({ label: { fontSize: '0.8em' } }));

1.将其应用于FormControlLabel

相关问题