# How to add MUI localization


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(
    components: { ...mergeComponentOverrides(theme, settings) },
    typography: { ...mergeTypography(theme) }
Last Updated: 6/22/2023, 7:07:20 AM