# 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'
  1. Import the useTranslation hook from react-i18next
import { useTranslation } from 'react-i18next'
  1. Create a langObj variable
  1. Initialize the useTranslation hook
const { i18n } = useTranslation()
  1. Add the language as a parameter to the createTheme function
theme = createTheme(
  theme,
  {
    components: { ...mergeComponentOverrides(theme, settings) },
    typography: { ...mergeTypography(theme) }
  },
  langObj[i18n.language]
  )
Last Updated: 7/22/2022, 11:43:00 AM