diff --git a/src/reports/components/ReportsMenu.jsx b/src/reports/components/ReportsMenu.jsx
index fedaac5ed7..956d1fcd2d 100644
--- a/src/reports/components/ReportsMenu.jsx
+++ b/src/reports/components/ReportsMenu.jsx
@@ -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();
diff --git a/src/settings/components/SettingsMenu.jsx b/src/settings/components/SettingsMenu.jsx
index 7cc263e7e8..b2970df88e 100644
--- a/src/settings/components/SettingsMenu.jsx
+++ b/src/settings/components/SettingsMenu.jsx
@@ -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();