React MUI本地化

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

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

支持的区域设置：

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

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

npx create-react-app foldername

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

cd foldername

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

npm install @mui/material

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

示例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/，你会看到以下输出：

示例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>
    );
}

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

npm start

输出：

参考： https://mui.com/material-ui/guides/localization/#main-content