While working with material ui treeview, I have customized the fontSize for each treeItem as shown below:
<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>
The issue I'm facing is that changes in font size are only reflected when I run the project using npm start. After updating the font size and saving (ctrl+s), if I close or refresh the project, the styles revert back to default. The complete code can be found below:
interface ChildProps {
accordianCat: Categories[];
}
const TreeViewComp = ({ accordianCat }: ChildProps) => {
const { employee } = useTypedSelector((state) => state);
// More code here...