From a78d36ffc5bc0ed3ba9083bfd7592f088db24449 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 27 Dec 2021 10:54:59 +0100 Subject: [PATCH 1/3] [docs] Inform about specific files for DataGrid locales --- docs/src/pages/guides/localization/localization.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index 10331e8d40d0e3..35fbf503cc1ef9 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -28,7 +28,9 @@ const theme = createTheme( ### Example -{{"demo": "pages/guides/localization/Locales.js", "defaultCodeOpen": false}} +{{"demo": "pages/guides/localization/Locales.js", "hideToolbar": true}} + +> ⚠️ The `DataGrid` and `DataGridPro` components have their own locale files. To use them see the documentation about [localization for DataGrid](/components/data-grid/localization/). ### Supported locales From e58beb2afcfb51a0d12caab082e08c0ad40660e8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Fri, 7 Jan 2022 13:19:13 +0100 Subject: [PATCH 2/3] PR feedbacks --- docs/src/pages/guides/localization/Locales.js | 8 ++++---- docs/src/pages/guides/localization/Locales.tsx | 8 +++++--- docs/src/pages/guides/localization/localization.md | 4 ++-- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index c774f751279fbb..60781ea28503d0 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -3,17 +3,17 @@ import TablePagination from '@mui/material/TablePagination'; import Autocomplete from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; import * as locales from '@mui/material/locale'; export default function Locales() { const [locale, setLocale] = React.useState('zhCN'); + const theme = useTheme(); + const themeWithLocale = createTheme(theme, locales[locale]); return ( - createTheme(outerTheme, locales[locale])} - > + `${key.substring(0, 2)}-${key.substring(2, 4)}`} diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx index 71df253c4317ff..7fd70d0cdef975 100644 --- a/docs/src/pages/guides/localization/Locales.tsx +++ b/docs/src/pages/guides/localization/Locales.tsx @@ -3,7 +3,7 @@ import TablePagination from '@mui/material/TablePagination'; import Autocomplete from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; import * as locales from '@mui/material/locale'; type SupportedLocales = keyof typeof locales; @@ -11,10 +11,12 @@ type SupportedLocales = keyof typeof locales; export default function Locales() { const [locale, setLocale] = React.useState('zhCN'); + const theme = useTheme() + const themeWithLocale = createTheme(theme, locales[locale]) return ( createTheme(outerTheme, locales[locale])} + theme={themeWithLocale} > {}} + onPageChange={() => { }} /> diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index 35fbf503cc1ef9..e90a938388521e 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -28,9 +28,9 @@ const theme = createTheme( ### Example -{{"demo": "pages/guides/localization/Locales.js", "hideToolbar": true}} +{{"demo": "pages/guides/localization/Locales.js"}} -> ⚠️ The `DataGrid` and `DataGridPro` components have their own locale files. To use them see the documentation about [localization for DataGrid](/components/data-grid/localization/). +> ⚠️ For [`DataGrid` and `DataGridPro`](/components/data-grid/) components, they have their own [localization](/components/data-grid/localization/). ### Supported locales From c80e7d8b384bab9c3feaf79676a643f64160ccb4 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 11 Jan 2022 14:41:29 +0100 Subject: [PATCH 3/3] feedbacks --- docs/src/pages/guides/localization/Locales.js | 7 ++++++- docs/src/pages/guides/localization/Locales.tsx | 15 +++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index 60781ea28503d0..c8808f4146b4d0 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -10,7 +10,12 @@ export default function Locales() { const [locale, setLocale] = React.useState('zhCN'); const theme = useTheme(); - const themeWithLocale = createTheme(theme, locales[locale]); + + const themeWithLocale = React.useMemo( + () => createTheme(theme, locales[locale]), + [locale, theme], + ); + return ( diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx index 7fd70d0cdef975..6114376bf78d33 100644 --- a/docs/src/pages/guides/localization/Locales.tsx +++ b/docs/src/pages/guides/localization/Locales.tsx @@ -11,13 +11,16 @@ type SupportedLocales = keyof typeof locales; export default function Locales() { const [locale, setLocale] = React.useState('zhCN'); - const theme = useTheme() - const themeWithLocale = createTheme(theme, locales[locale]) + const theme = useTheme(); + + const themeWithLocale = React.useMemo( + () => createTheme(theme, locales[locale]), + [locale, theme], + ); + return ( - + `${key.substring(0, 2)}-${key.substring(2, 4)}`} @@ -36,7 +39,7 @@ export default function Locales() { rowsPerPage={10} page={1} component="div" - onPageChange={() => { }} + onPageChange={() => {}} />