Блог

У меня есть проект для мониторинга сотрудников, и у меня есть боковая панель, и эта боковая панель содержит много элементов, и я собрал эти элементы в файле «элементы» и вызвал элементы в файле «боковая панель».

Но в файле боковой панели я хочу сделать размер шрифта для этих элементов большим, но я не смог этого сделать, как можно решить проблему? предметы.tsx:

 const ItemsList = [{
    title: 'Settings',
    path: '/authentication/workspace-sidebar/settings',

}, {
    title: 'People',
    path: '/authentication/workspace-sidebar/people',

}, {
    title: 'Teams',
    path: '/authentication/workspace-sidebar/teams',

},
    {
        title: 'Spaces',
        path: '/workspace-sidebar/spaces',
    }, {
        title: 'Import/Export',
        path: '/workspace-sidebar/IE',
    }, {
        title: 'Security amp; Permissions',
        path: '/workspace-sidebar/sec-per',
    }]
const ItemsSecond = [{
    title: 'My Settings',
    path: '/workspace-sidebar/my-settings',

}, {
    title: 'Workspaces',
    path: '/workspace-sidebar/workspaces',

}, {
    title: 'Notifications',
    path: '/workspace-sidebar/notifications',

}, {
    title: 'Rewards',
    path: '/workspace-sidebar/rewards',

}, {
    title: 'Log out',
    path: '/dashboard/account',

}
]


export default { ItemsList , ItemsSecond};
 

боковая панель.tsx:

 const drawerWidth = 334;

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            display: 'flex',
        },
        drawer: {
            [theme.breakpoints.up('sm')]: {
                width: drawerWidth,
                flexShrink: 0,
            },
        },
        fontSize:{
            fontSize:24
        },
        appBar: {
            [theme.breakpoints.up('sm')]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth,
            },
        },
        menuButton: {
            marginRight: theme.spacing(2),
            [theme.breakpoints.up('sm')]: {
                display: 'none',
            },
        },
        // necessary for content to be below app bar
        toolbar: theme.mixins.toolbar,
        drawerPaper: {
            width: drawerWidth,
        },
        content: {
            flexGrow: 1,
            padding: theme.spacing(3),
        },
    }),
);

interface Props {

    window?: () => Window;
}

export default function ResponsiveDrawer(props: Props) {
    const {window} = props;
    const classes = useStyles();
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = React.useState(false);

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    const drawer = (
        <div>
            <div className={classes.toolbar}/>
            <Box sx={{ p:5 }}>
                <List>
                    {SidebarItems.ItemsList.map((text, index) => (
                        <ListItem button key={text.title}  className= {
                            classes.fontSize
                        }>
                            <ListItemText

                            primary={text.title}/>
                        </ListItem>
                    ))}
                </List>
                <Divider/>
                <List>
                    {SidebarItems.ItemsSecond.map((text, index) => (
                        <ListItem button key={text.title}>
                            <ListItemIcon>{index % 2 === 0 ? <InboxIcon/> : <MailIcon/>} 
                            </ListItemIcon>
                            <ListItemText primary={text.title}/>
                        </ListItem>
                    ))}
                </List>
            </Box>
        </div>
    );

    const container = window !== undefined ? () => window().document.body : undefined;

    return (
        <div className={classes.root}>
            <CssBaseline/>

            <nav className={classes.drawer} aria-label="mailbox folders">
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        // anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
                <Hidden xsDown implementation="css">
                    <Drawer
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        variant="permanent"
                        open
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
            <main className={classes.content}>
                <div className={classes.toolbar}/>
                <Drawer>

                </Drawer>
            </main>
        </div>
    );
}
 

Таким .MuiListItemText-primary образом, класс ListItemText компонента переопределяет ваш fontSize класс. Вы хотите применить этот класс к primary правилу в classes реквизите ListItemText компонента, чтобы переопределить размер шрифта .MuiListItemText-primary класса. Примените следующее ко всем вашим ListItemText компонентам:

 <ListItemText
  classes={{
    primary: classes.fontSize,
  }}
  primary={text.title}
/>