Use class instead of sx

This commit is contained in:
jcardus 2024-11-14 17:01:41 +00:00
parent 547dafb6af
commit f4cef90cf6
2 changed files with 32 additions and 12 deletions

View File

@ -14,17 +14,27 @@ import RouteIcon from '@mui/icons-material/Route';
import EventRepeatIcon from '@mui/icons-material/EventRepeat';
import NotesIcon from '@mui/icons-material/Notes';
import { Link, useLocation } from 'react-router-dom';
import makeStyles from '@mui/styles/makeStyles';
import { useTranslation } from '../../common/components/LocalizationProvider';
import { useAdministrator, useRestriction } from '../../common/util/permissions';
const useStyles = makeStyles({
menuItemText: {
whiteSpace: 'nowrap',
},
});
const MenuItem = ({
title, link, icon, selected,
}) => (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} sx={{ whiteSpace: 'nowrap' }} />
</ListItemButton>
);
}) => {
const classes = useStyles();
return (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} className={classes.menuItemText} />
</ListItemButton>
);
};
const ReportsMenu = () => {
const t = useTranslation();

View File

@ -17,20 +17,30 @@ import HelpIcon from '@mui/icons-material/Help';
import CampaignIcon from '@mui/icons-material/Campaign';
import { Link, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import makeStyles from '@mui/styles/makeStyles';
import { useTranslation } from '../../common/components/LocalizationProvider';
import {
useAdministrator, useManager, useRestriction,
} from '../../common/util/permissions';
import useFeatures from '../../common/util/useFeatures';
const useStyles = makeStyles({
menuItemText: {
whiteSpace: 'nowrap',
},
});
const MenuItem = ({
title, link, icon, selected,
}) => (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} sx={{ whiteSpace: 'nowrap' }} />
</ListItemButton>
);
}) => {
const classes = useStyles();
return (
<ListItemButton key={link} component={Link} to={link} selected={selected}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} className={classes.menuItemText} />
</ListItemButton>
);
};
const SettingsMenu = () => {
const t = useTranslation();