How to add MUI localization

WARNING

To use MUI localization you'll have to make changes in the ThemeComponent.tsx file.

You'll have to make a copy of the ThemeComponent.tsx file to keep it as a backup while updating the template.

Localization Synced With I18n

1. Open the src/@core/theme/ThemeComponent.tsx file
2. Import the locales you need from '@mui/material/locale'

3. Import the useTranslation hook from react-i18next

import { useTranslation } from 'react-i18next'

4. Create a langObj variable

5. Initialize the useTranslation hook

const { i18n } = useTranslation()

6. Add the language as a parameter to the createTheme function

theme = createTheme(
  theme,
  {
    components: { ...mergeComponentOverrides(theme, settings) },
    typography: { ...mergeTypography(theme) }
  },
  langObj[i18n.language]
  )