diff --git a/package.json b/package.json
index 019c097d9aefc2fb1a8f4c775246a9856d07ce9a..d77b1f238acfc073e66039b66cadfc3bbf861a69 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",
-    "@mui/styles": "^5.13.2",
     "@mui/utils": "^5.13.1",
     "@mui/x-tree-view": "^6.17.0",
     "@react-aria/live-announcer": "^3.1.2",
diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js
index 4f0888beb8ce13a452d370ae8c5088e067babea9..f39aae60984e174a60d8a569b591bc78b6275753 100644
--- a/src/components/AppProviders.js
+++ b/src/components/AppProviders.js
@@ -5,8 +5,6 @@ import { I18nextProvider } from 'react-i18next';
 import {
   ThemeProvider, StyledEngineProvider, createTheme,
 } from '@mui/material/styles';
-import StylesProvider from '@mui/styles/StylesProvider';
-import createGenerateClassName from '@mui/styles/createGenerateClassName';
 import { DndContext, DndProvider } from 'react-dnd';
 import { MultiBackend } from 'react-dnd-multi-backend';
 import { HTML5toTouch } from 'rdndmb-html5-to-touch';
@@ -96,13 +94,11 @@ export class AppProviders extends Component {
   /** */
   render() {
     const {
-      children, createGenerateClassNameOptions,
+      children,
       theme, translations,
       dndManager,
     } = this.props;
 
-    const generateClassName = createGenerateClassName(createGenerateClassNameOptions);
-
     /**
      * Create rtl emotion cache
      */
@@ -128,11 +124,9 @@ export class AppProviders extends Component {
           <StyledEngineProvider injectFirst>
             <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
               <ThemeProvider theme={createTheme((theme))}>
-                <StylesProvider generateClassName={generateClassName}>
-                  <MaybeDndProvider dndManager={dndManager}>
-                    {children}
-                  </MaybeDndProvider>
-                </StylesProvider>
+                <MaybeDndProvider dndManager={dndManager}>
+                  {children}
+                </MaybeDndProvider>
               </ThemeProvider>
             </CacheProvider>
           </StyledEngineProvider>
@@ -144,7 +138,6 @@ export class AppProviders extends Component {
 
 AppProviders.propTypes = {
   children: PropTypes.node,
-  createGenerateClassNameOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   dndManager: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   language: PropTypes.string.isRequired,
   theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -153,6 +146,5 @@ AppProviders.propTypes = {
 
 AppProviders.defaultProps = {
   children: null,
-  createGenerateClassNameOptions: {},
   dndManager: undefined,
 };
diff --git a/src/containers/AppProviders.js b/src/containers/AppProviders.js
index 22e8a3a06d4381880ecb305bea240a6df748ac1b..1ad1c6784dde9f7e5b583f13b2e39851bc397f40 100644
--- a/src/containers/AppProviders.js
+++ b/src/containers/AppProviders.js
@@ -11,7 +11,6 @@ import { AppProviders } from '../components/AppProviders';
  */
 const mapStateToProps = state => (
   {
-    createGenerateClassNameOptions: getConfig(state).createGenerateClassNameOptions,
     language: getConfig(state).language,
     theme: getTheme(state),
     translations: getConfig(state).translations,