React MUI本地化

Material-UI 是一个用户界面框架，提供了预定义和可定制的React组件，用于更快速和简便的Web开发。Material-UI组件基于Google的Material Design设计。在本文中，让我们讨论Material-UI库中的 本地化工具 。

MUI提供的 本地化工具 用于将特定的产品或内容适应特定的区域或市场。MUI的默认区域设置为英语（美国）。

支持的区域设置：

Locale	Import Name
Amharic	amET
Arabic (Egypt)	arEG
Arabic (Saudi Arabia)	arSA
Arabic (Sudan)	arSD
Armenian	hyAM
Azerbaijani	azAZ
Bangla	bnBD
Bulgarian	bgBG
Catalan	caES
Chinese (Hong Kong)	zhHK
Chinese (Simplified)	zhCN
Chinese (Taiwan)	zhTW
Croatian	hrHR
Czech	csCZ
Danish	daDK
Dutch	nlNL
English (United States)	enUS
Estonian	etEE
Finnish	fiFI
French	frFR
German	deDE
Greek	elGR
Hebrew	heIL
Hindi	hiIN
Hungarian	huHU
Icelandic	isIS
Indonesian	idID
Italian	itIT
Japanese	jaJP
Khmer	khKH
Kazakh	kzKZ
Korean	koKR
Macedonian	mkMK
Norwegian (bokmål)	nbND
Persian	faIR
Polish	plPL
Portuguese	ptPT
Portuguese (Brazil)	ptBR
Romanian	roRO
Russian	ruRU
Serbian	srRS
Sinhalese	siLK
Slovak	skSK
Spanish	esES
Swedish	svSE
Thai	thTH
Turkish	trTR
Ukrainian	ukUA
Vietnamese	viVN

创建React应用程序和安装模块：

步骤1： 使用以下命令创建React应用程序：

npx create-react-app foldername

步骤2： 创建您的项目文件夹，例如文件夹名称，并使用以下命令切换到该文件夹：

cd foldername

步骤3: 创建了 ReactJS 应用程序后，使用以下命令安装所需的模块：

npm install @mui/material

项目结构： 它会看起来像以下这样。

React MUI本地化

示例1： 在这个示例中，我们将尝试创建一个简单的应用程序，该应用程序使用MUI的本地化工具。我们将构建一个下拉菜单，允许用户选择特定的区域设置，并在所选的区域设置中显示表的分页。

现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在其中编写了我们的代码：

文件名：App.js

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import * as locales from '@mui/material/locale';
 
export default function App() {
    const [locale, setLocale] = React.useState('zhCN');
    const theme = useTheme();
    const themeWithLocale = React.useMemo(
        () => createTheme(theme, locales[locale]),
        [locale, theme],
    );
    return (
        <ThemeProvider theme={themeWithLocale}>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Localization until</strong>
                <br />
                <br />
            </div>
            <Autocomplete
                options={Object.keys(locales)}
                getOptionLabel={(key) => 
                    `{key.substring(0, 2)}-{key.substring(2, 4)}`}
                style={{ width: 300 }}
                value={locale}
                disableClearable
                onChange={(event, newValue) => {
                    setLocale(newValue);
                }}
                renderInput={(params) => (
                    <TextField {...params} 
                    label="Locale" fullWidth />
                )}
            />
            <TablePagination
                count={2000}
                rowsPerPage={10}
                page={1}
                component="div"
                onPageChange={() => { }}
            />
        </ThemeProvider>
    );
}

运行应用的步骤： 从项目的根目录使用以下命令运行应用：

npm start

输出： 现在打开你的浏览器并访问 http://localhost:3000/，你会看到以下输出：

React MUI本地化

示例2： 在这个示例中，我们将尝试创建一个使用MUI的本地化工具的简单应用程序。我们将构建一个开关，允许用户在英语（美国）和中文（简体）之间切换。

文件名：App.js

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { zhCN, enUS } from '@mui/material/locale';
import { Switch } from '@mui/material';
 
export default function App() {
    const [locale, setLocale] = React.useState(enUS);
    const [checked, setChecked] = React.useState(false);
    const theme = useTheme();
    const themeWithLocale = React.useMemo(
        () => createTheme(theme, locale),
        [theme, locale],
    );
    React.useEffect(() => {
        if (checked) {
            setLocale(zhCN)
        } else {
            setLocale(enUS)
        }
    }, [checked])
    return (
        <ThemeProvider theme={themeWithLocale}>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Localization until</strong>
                <br />
                <br />
            </div>
            <div style={{ display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center' }}>
                <Switch checked={checked} onChange={() => {
                    setChecked(checked => !checked);
                }} />
                <p>{locale === enUS ? 'English (US)' : 
                    'Chinese (Simplified)'}</p>
            </div>
            <TablePagination
                count={2000}
                rowsPerPage={10}
                page={1}
                component="div"
                onPageChange={() => { }}
            />
        </ThemeProvider>
    );
}