'material ui : Change Defualt font Family Listitem Text Material Ui [closed]

<ListItem disablePadding key={index}>
            <Link to={data.loc}>
              <ListItemButton>
                <ListItemIcon>
                  <data.icon color={setColor(page, data.index,'secondary','primary')} />
                </ListItemIcon>
                <ListItemText
                  primary={data.name}
                  style={{color:setColor(page,data.index,'#FBC02D','white'),fontFamily:'Vazir'}}
                />
              </ListItemButton>
            </Link>
 </ListItem>

im wana fix this code change fontfamily but i see in elemnt in dev tools not changed

my code

my font

//output:image



Solution 1:[1]

im fixe the problem

just add disableTypography={true}

into ListItemText

image code

Solution 2:[2]

ListItem:{
      '& span, & svg': {
      fontFamily: "fontName" ,
      fontSize: '1rem'  },
      color:' darkGreen' ,
      paddingLeft: 20,
      
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pouya
Solution 2 Jakub Kurdziel