因此,我使用的是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;
1条答案
按热度按时间bgtovc5b1#
1.创建您的自定义样式,例如
1.将其应用于
FormControlLabel
。