From b18ca8892ff9a2c693f7c46c10d77896342b1abe Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Fri, 31 Oct 2025 11:27:00 +0100 Subject: [PATCH 1/8] [code-infra] Migrate everything to getStaticProps --- docs/pages/experiments/index.js | 8 +- docs/pages/joy-ui/api/accordion-details.js | 10 +- docs/pages/joy-ui/api/accordion-group.js | 10 +- docs/pages/joy-ui/api/accordion-summary.js | 10 +- docs/pages/joy-ui/api/accordion.js | 10 +- docs/pages/joy-ui/api/alert.js | 10 +- docs/pages/joy-ui/api/aspect-ratio.js | 10 +- docs/pages/joy-ui/api/autocomplete-listbox.js | 10 +- docs/pages/joy-ui/api/autocomplete-option.js | 10 +- docs/pages/joy-ui/api/autocomplete.js | 10 +- docs/pages/joy-ui/api/avatar-group.js | 10 +- docs/pages/joy-ui/api/avatar.js | 10 +- docs/pages/joy-ui/api/badge.js | 10 +- docs/pages/joy-ui/api/box.js | 10 +- docs/pages/joy-ui/api/breadcrumbs.js | 10 +- docs/pages/joy-ui/api/button-group.js | 10 +- docs/pages/joy-ui/api/button.js | 10 +- docs/pages/joy-ui/api/card-actions.js | 10 +- docs/pages/joy-ui/api/card-content.js | 10 +- docs/pages/joy-ui/api/card-cover.js | 10 +- docs/pages/joy-ui/api/card-overflow.js | 10 +- docs/pages/joy-ui/api/card.js | 10 +- docs/pages/joy-ui/api/checkbox.js | 10 +- docs/pages/joy-ui/api/chip-delete.js | 10 +- docs/pages/joy-ui/api/chip.js | 10 +- docs/pages/joy-ui/api/circular-progress.js | 10 +- docs/pages/joy-ui/api/css-baseline.js | 10 +- docs/pages/joy-ui/api/dialog-actions.js | 10 +- docs/pages/joy-ui/api/dialog-content.js | 10 +- docs/pages/joy-ui/api/dialog-title.js | 10 +- docs/pages/joy-ui/api/divider.js | 10 +- docs/pages/joy-ui/api/drawer.js | 10 +- docs/pages/joy-ui/api/form-control.js | 10 +- docs/pages/joy-ui/api/form-helper-text.js | 10 +- docs/pages/joy-ui/api/form-label.js | 10 +- docs/pages/joy-ui/api/grid.js | 10 +- docs/pages/joy-ui/api/icon-button.js | 10 +- docs/pages/joy-ui/api/input.js | 10 +- docs/pages/joy-ui/api/linear-progress.js | 10 +- docs/pages/joy-ui/api/link.js | 10 +- docs/pages/joy-ui/api/list-divider.js | 10 +- docs/pages/joy-ui/api/list-item-button.js | 10 +- docs/pages/joy-ui/api/list-item-content.js | 10 +- docs/pages/joy-ui/api/list-item-decorator.js | 10 +- docs/pages/joy-ui/api/list-item.js | 10 +- docs/pages/joy-ui/api/list-subheader.js | 10 +- docs/pages/joy-ui/api/list.js | 10 +- docs/pages/joy-ui/api/menu-button.js | 10 +- docs/pages/joy-ui/api/menu-item.js | 10 +- docs/pages/joy-ui/api/menu-list.js | 10 +- docs/pages/joy-ui/api/menu.js | 10 +- docs/pages/joy-ui/api/modal-close.js | 10 +- docs/pages/joy-ui/api/modal-dialog.js | 10 +- docs/pages/joy-ui/api/modal-overflow.js | 10 +- docs/pages/joy-ui/api/modal.js | 10 +- docs/pages/joy-ui/api/option.js | 10 +- docs/pages/joy-ui/api/radio-group.js | 10 +- docs/pages/joy-ui/api/radio.js | 10 +- docs/pages/joy-ui/api/scoped-css-baseline.js | 10 +- docs/pages/joy-ui/api/select.js | 10 +- docs/pages/joy-ui/api/sheet.js | 10 +- docs/pages/joy-ui/api/skeleton.js | 10 +- docs/pages/joy-ui/api/slider.js | 10 +- docs/pages/joy-ui/api/snackbar.js | 10 +- docs/pages/joy-ui/api/stack.js | 10 +- docs/pages/joy-ui/api/step-button.js | 10 +- docs/pages/joy-ui/api/step-indicator.js | 10 +- docs/pages/joy-ui/api/step.js | 10 +- docs/pages/joy-ui/api/stepper.js | 10 +- docs/pages/joy-ui/api/svg-icon.js | 10 +- docs/pages/joy-ui/api/switch.js | 10 +- docs/pages/joy-ui/api/tab-list.js | 10 +- docs/pages/joy-ui/api/tab-panel.js | 10 +- docs/pages/joy-ui/api/tab.js | 10 +- docs/pages/joy-ui/api/table.js | 10 +- docs/pages/joy-ui/api/tabs.js | 10 +- docs/pages/joy-ui/api/textarea.js | 10 +- docs/pages/joy-ui/api/toggle-button-group.js | 10 +- docs/pages/joy-ui/api/tooltip.js | 10 +- docs/pages/joy-ui/api/typography.js | 10 +- .../material-ui/api/accordion-actions.js | 10 +- .../material-ui/api/accordion-details.js | 10 +- .../material-ui/api/accordion-summary.js | 10 +- docs/pages/material-ui/api/accordion.js | 10 +- docs/pages/material-ui/api/alert-title.js | 10 +- docs/pages/material-ui/api/alert.js | 10 +- docs/pages/material-ui/api/app-bar.js | 10 +- docs/pages/material-ui/api/autocomplete.js | 10 +- docs/pages/material-ui/api/avatar-group.js | 10 +- docs/pages/material-ui/api/avatar.js | 10 +- docs/pages/material-ui/api/backdrop.js | 10 +- docs/pages/material-ui/api/badge.js | 10 +- .../api/bottom-navigation-action.js | 10 +- .../material-ui/api/bottom-navigation.js | 10 +- docs/pages/material-ui/api/box.js | 10 +- docs/pages/material-ui/api/breadcrumbs.js | 10 +- docs/pages/material-ui/api/button-base.js | 10 +- docs/pages/material-ui/api/button-group.js | 10 +- docs/pages/material-ui/api/button.js | 10 +- .../pages/material-ui/api/card-action-area.js | 10 +- docs/pages/material-ui/api/card-actions.js | 10 +- docs/pages/material-ui/api/card-content.js | 10 +- docs/pages/material-ui/api/card-header.js | 10 +- docs/pages/material-ui/api/card-media.js | 10 +- docs/pages/material-ui/api/card.js | 10 +- docs/pages/material-ui/api/checkbox.js | 10 +- docs/pages/material-ui/api/chip.js | 10 +- .../material-ui/api/circular-progress.js | 10 +- .../material-ui/api/click-away-listener.js | 10 +- docs/pages/material-ui/api/collapse.js | 10 +- docs/pages/material-ui/api/container.js | 10 +- docs/pages/material-ui/api/css-baseline.js | 10 +- docs/pages/material-ui/api/dialog-actions.js | 10 +- .../material-ui/api/dialog-content-text.js | 10 +- docs/pages/material-ui/api/dialog-content.js | 10 +- docs/pages/material-ui/api/dialog-title.js | 10 +- docs/pages/material-ui/api/dialog.js | 10 +- docs/pages/material-ui/api/divider.js | 10 +- docs/pages/material-ui/api/drawer.js | 10 +- docs/pages/material-ui/api/fab.js | 10 +- docs/pages/material-ui/api/fade.js | 10 +- docs/pages/material-ui/api/filled-input.js | 10 +- .../material-ui/api/form-control-label.js | 10 +- docs/pages/material-ui/api/form-control.js | 10 +- docs/pages/material-ui/api/form-group.js | 10 +- .../pages/material-ui/api/form-helper-text.js | 10 +- docs/pages/material-ui/api/form-label.js | 10 +- docs/pages/material-ui/api/global-styles.js | 10 +- docs/pages/material-ui/api/grid-legacy.js | 10 +- docs/pages/material-ui/api/grid.js | 10 +- docs/pages/material-ui/api/grow.js | 10 +- docs/pages/material-ui/api/icon-button.js | 10 +- docs/pages/material-ui/api/icon.js | 10 +- .../material-ui/api/image-list-item-bar.js | 10 +- docs/pages/material-ui/api/image-list-item.js | 10 +- docs/pages/material-ui/api/image-list.js | 10 +- docs/pages/material-ui/api/input-adornment.js | 10 +- docs/pages/material-ui/api/input-base.js | 10 +- docs/pages/material-ui/api/input-label.js | 10 +- docs/pages/material-ui/api/input.js | 10 +- docs/pages/material-ui/api/linear-progress.js | 10 +- docs/pages/material-ui/api/link.js | 10 +- .../pages/material-ui/api/list-item-avatar.js | 10 +- .../pages/material-ui/api/list-item-button.js | 10 +- docs/pages/material-ui/api/list-item-icon.js | 10 +- .../api/list-item-secondary-action.js | 10 +- docs/pages/material-ui/api/list-item-text.js | 10 +- docs/pages/material-ui/api/list-item.js | 10 +- docs/pages/material-ui/api/list-subheader.js | 10 +- docs/pages/material-ui/api/list.js | 10 +- docs/pages/material-ui/api/masonry.js | 10 +- docs/pages/material-ui/api/menu-item.js | 10 +- docs/pages/material-ui/api/menu-list.js | 10 +- docs/pages/material-ui/api/menu.js | 10 +- docs/pages/material-ui/api/mobile-stepper.js | 10 +- docs/pages/material-ui/api/modal.js | 10 +- docs/pages/material-ui/api/native-select.js | 10 +- docs/pages/material-ui/api/no-ssr.js | 10 +- docs/pages/material-ui/api/outlined-input.js | 10 +- docs/pages/material-ui/api/pagination-item.js | 10 +- docs/pages/material-ui/api/pagination.js | 10 +- docs/pages/material-ui/api/paper.js | 10 +- .../material-ui/api/pigment-container.js | 10 +- docs/pages/material-ui/api/pigment-grid.js | 10 +- docs/pages/material-ui/api/pigment-stack.js | 10 +- docs/pages/material-ui/api/popover.js | 10 +- docs/pages/material-ui/api/popper.js | 10 +- docs/pages/material-ui/api/portal.js | 10 +- docs/pages/material-ui/api/radio-group.js | 10 +- docs/pages/material-ui/api/radio.js | 10 +- docs/pages/material-ui/api/rating.js | 10 +- .../material-ui/api/scoped-css-baseline.js | 10 +- docs/pages/material-ui/api/select.js | 10 +- docs/pages/material-ui/api/skeleton.js | 10 +- docs/pages/material-ui/api/slide.js | 10 +- docs/pages/material-ui/api/slider.js | 10 +- .../pages/material-ui/api/snackbar-content.js | 10 +- docs/pages/material-ui/api/snackbar.js | 10 +- .../material-ui/api/speed-dial-action.js | 10 +- docs/pages/material-ui/api/speed-dial-icon.js | 10 +- docs/pages/material-ui/api/speed-dial.js | 10 +- docs/pages/material-ui/api/stack.js | 10 +- docs/pages/material-ui/api/step-button.js | 10 +- docs/pages/material-ui/api/step-connector.js | 10 +- docs/pages/material-ui/api/step-content.js | 10 +- docs/pages/material-ui/api/step-icon.js | 10 +- docs/pages/material-ui/api/step-label.js | 10 +- docs/pages/material-ui/api/step.js | 10 +- docs/pages/material-ui/api/stepper.js | 10 +- docs/pages/material-ui/api/svg-icon.js | 10 +- .../pages/material-ui/api/swipeable-drawer.js | 10 +- docs/pages/material-ui/api/switch.js | 10 +- docs/pages/material-ui/api/tab-context.js | 10 +- docs/pages/material-ui/api/tab-list.js | 10 +- docs/pages/material-ui/api/tab-panel.js | 10 +- .../material-ui/api/tab-scroll-button.js | 10 +- docs/pages/material-ui/api/tab.js | 10 +- docs/pages/material-ui/api/table-body.js | 10 +- docs/pages/material-ui/api/table-cell.js | 10 +- docs/pages/material-ui/api/table-container.js | 10 +- docs/pages/material-ui/api/table-footer.js | 10 +- docs/pages/material-ui/api/table-head.js | 10 +- .../pages/material-ui/api/table-pagination.js | 10 +- docs/pages/material-ui/api/table-row.js | 10 +- .../pages/material-ui/api/table-sort-label.js | 10 +- docs/pages/material-ui/api/table.js | 10 +- docs/pages/material-ui/api/tabs.js | 10 +- docs/pages/material-ui/api/text-field.js | 10 +- .../material-ui/api/textarea-autosize.js | 10 +- .../material-ui/api/timeline-connector.js | 10 +- .../pages/material-ui/api/timeline-content.js | 10 +- docs/pages/material-ui/api/timeline-dot.js | 10 +- docs/pages/material-ui/api/timeline-item.js | 10 +- .../api/timeline-opposite-content.js | 10 +- .../material-ui/api/timeline-separator.js | 10 +- docs/pages/material-ui/api/timeline.js | 10 +- .../material-ui/api/toggle-button-group.js | 10 +- docs/pages/material-ui/api/toggle-button.js | 10 +- docs/pages/material-ui/api/toolbar.js | 10 +- docs/pages/material-ui/api/tooltip.js | 10 +- docs/pages/material-ui/api/typography.js | 10 +- docs/pages/material-ui/api/zoom.js | 10 +- docs/pages/system/api/box.js | 10 +- docs/pages/system/api/container.js | 10 +- docs/pages/system/api/grid.js | 10 +- docs/pages/system/api/stack.js | 10 +- docs/public/material-ui/all-components.md | 22 + .../material-ui/customization/breakpoints.md | 299 + .../public/material-ui/customization/color.md | 572 ++ .../customization/container-queries.md | 258 + .../creating-themed-components.md | 515 ++ .../material-ui/customization/css-layers.md | 417 ++ .../material-ui/customization/dark-mode.md | 596 ++ .../customization/default-theme.md | 216 + .../material-ui/customization/density.md | 241 + .../customization/how-to-customize.md | 493 ++ .../overriding-component-structure.md | 182 + .../material-ui/customization/palette.md | 960 +++ .../customization/right-to-left.md | 222 + .../material-ui/customization/shadow-dom.md | 117 + .../material-ui/customization/spacing.md | 99 + .../customization/theme-components.md | 443 ++ .../material-ui/customization/theming.md | 488 ++ .../material-ui/customization/transitions.md | 125 + .../material-ui/customization/typography.md | 567 ++ .../material-ui/customization/z-index.md | 21 + .../design-resources/material-ui-for-figma.md | 124 + .../design-resources/material-ui-sync.md | 296 + .../material-ui/discover-more/backers.md | 188 + .../material-ui/discover-more/changelog.md | 6 + .../discover-more/related-projects.md | 64 + .../material-ui/discover-more/roadmap.md | 31 + .../material-ui/discover-more/showcase.md | 7 + .../material-ui/discover-more/vision.md | 16 + .../experimental-api/classname-generator.md | 187 + .../experimental-api/pigment-css.md | 375 + .../getting-started/design-resources.md | 28 + .../getting-started/example-projects.md | 26 + .../public/material-ui/getting-started/faq.md | 495 ++ .../getting-started/installation.md | 230 + .../material-ui/getting-started/learn.md | 45 + .../public/material-ui/getting-started/mcp.md | 156 + .../material-ui/getting-started/support.md | 132 + .../getting-started/supported-components.md | 282 + .../getting-started/supported-platforms.md | 45 + .../material-ui/getting-started/templates.md | 37 + .../material-ui/getting-started/usage.md | 42 + docs/public/material-ui/guides/api.md | 174 + .../guides/building-extensible-themes.md | 304 + docs/public/material-ui/guides/composition.md | 266 + .../guides/content-security-policy.md | 179 + .../public/material-ui/guides/localization.md | 159 + .../guides/minimizing-bundle-size.md | 88 + .../material-ui/guides/responsive-ui.md | 11 + .../material-ui/guides/server-rendering.md | 217 + docs/public/material-ui/guides/testing.md | 21 + docs/public/material-ui/guides/typescript.md | 68 + docs/public/material-ui/icons.md | 830 +++ .../integrations/interoperability.md | 1188 ++++ .../public/material-ui/integrations/nextjs.md | 409 ++ .../material-ui/integrations/routing.md | 506 ++ .../integrations/styled-components.md | 97 + .../material-ui/integrations/theme-scoping.md | 95 + docs/public/material-ui/llms.txt | 158 + .../migrating-from-deprecated-apis.md | 2734 +++++++ .../material-ui/migration/migration-v0x.md | 189 + .../material-ui/migration/migration-v3.md | 473 ++ .../material-ui/migration/migration-v4.md | 472 ++ .../migration/pickers-migration.md | 149 + .../migration/upgrade-to-grid-v2.md | 207 + .../material-ui/migration/upgrade-to-v6.md | 749 ++ .../material-ui/migration/upgrade-to-v7.md | 117 + docs/public/material-ui/react-accordion.md | 864 +++ docs/public/material-ui/react-alert.md | 486 ++ docs/public/material-ui/react-app-bar.md | 1572 ++++ docs/public/material-ui/react-autocomplete.md | 6336 +++++++++++++++++ docs/public/material-ui/react-avatar.md | 667 ++ docs/public/material-ui/react-backdrop.md | 116 + docs/public/material-ui/react-badge.md | 532 ++ .../material-ui/react-bottom-navigation.md | 328 + docs/public/material-ui/react-box.md | 152 + docs/public/material-ui/react-breadcrumbs.md | 703 ++ docs/public/material-ui/react-button-group.md | 527 ++ docs/public/material-ui/react-button.md | 1115 +++ docs/public/material-ui/react-card.md | 1018 +++ docs/public/material-ui/react-checkbox.md | 800 +++ docs/public/material-ui/react-chip.md | 779 ++ .../material-ui/react-click-away-listener.md | 239 + docs/public/material-ui/react-container.md | 158 + docs/public/material-ui/react-css-baseline.md | 203 + docs/public/material-ui/react-dialog.md | 1501 ++++ docs/public/material-ui/react-divider.md | 410 ++ docs/public/material-ui/react-drawer.md | 1830 +++++ .../react-floating-action-button.md | 328 + docs/public/material-ui/react-grid-legacy.md | 1043 +++ docs/public/material-ui/react-grid.md | 1202 ++++ docs/public/material-ui/react-image-list.md | 970 +++ .../react-init-color-scheme-script.md | 176 + docs/public/material-ui/react-link.md | 204 + docs/public/material-ui/react-list.md | 1729 +++++ docs/public/material-ui/react-masonry.md | 528 ++ docs/public/material-ui/react-menu.md | 1401 ++++ docs/public/material-ui/react-modal.md | 575 ++ docs/public/material-ui/react-no-ssr.md | 157 + docs/public/material-ui/react-pagination.md | 637 ++ docs/public/material-ui/react-paper.md | 269 + docs/public/material-ui/react-popover.md | 742 ++ docs/public/material-ui/react-popper.md | 1041 +++ docs/public/material-ui/react-portal.md | 119 + docs/public/material-ui/react-progress.md | 816 +++ docs/public/material-ui/react-radio-button.md | 852 +++ docs/public/material-ui/react-rating.md | 438 ++ docs/public/material-ui/react-select.md | 1385 ++++ docs/public/material-ui/react-skeleton.md | 509 ++ docs/public/material-ui/react-slider.md | 1388 ++++ docs/public/material-ui/react-snackbar.md | 777 ++ docs/public/material-ui/react-speed-dial.md | 553 ++ docs/public/material-ui/react-stack.md | 642 ++ docs/public/material-ui/react-stepper.md | 1389 ++++ docs/public/material-ui/react-switch.md | 810 +++ docs/public/material-ui/react-table.md | 2208 ++++++ docs/public/material-ui/react-tabs.md | 1371 ++++ docs/public/material-ui/react-text-field.md | 2589 +++++++ .../material-ui/react-textarea-autosize.md | 117 + docs/public/material-ui/react-timeline.md | 946 +++ .../public/material-ui/react-toggle-button.md | 761 ++ docs/public/material-ui/react-tooltip.md | 797 +++ .../public/material-ui/react-transfer-list.md | 342 + docs/public/material-ui/react-typography.md | 300 + .../material-ui/react-use-media-query.md | 363 + docs/public/material-ui/transitions.md | 768 ++ 351 files changed, 72458 insertions(+), 903 deletions(-) create mode 100644 docs/public/material-ui/all-components.md create mode 100644 docs/public/material-ui/customization/breakpoints.md create mode 100644 docs/public/material-ui/customization/color.md create mode 100644 docs/public/material-ui/customization/container-queries.md create mode 100644 docs/public/material-ui/customization/creating-themed-components.md create mode 100644 docs/public/material-ui/customization/css-layers.md create mode 100644 docs/public/material-ui/customization/dark-mode.md create mode 100644 docs/public/material-ui/customization/default-theme.md create mode 100644 docs/public/material-ui/customization/density.md create mode 100644 docs/public/material-ui/customization/how-to-customize.md create mode 100644 docs/public/material-ui/customization/overriding-component-structure.md create mode 100644 docs/public/material-ui/customization/palette.md create mode 100644 docs/public/material-ui/customization/right-to-left.md create mode 100644 docs/public/material-ui/customization/shadow-dom.md create mode 100644 docs/public/material-ui/customization/spacing.md create mode 100644 docs/public/material-ui/customization/theme-components.md create mode 100644 docs/public/material-ui/customization/theming.md create mode 100644 docs/public/material-ui/customization/transitions.md create mode 100644 docs/public/material-ui/customization/typography.md create mode 100644 docs/public/material-ui/customization/z-index.md create mode 100644 docs/public/material-ui/design-resources/material-ui-for-figma.md create mode 100644 docs/public/material-ui/design-resources/material-ui-sync.md create mode 100644 docs/public/material-ui/discover-more/backers.md create mode 100644 docs/public/material-ui/discover-more/changelog.md create mode 100644 docs/public/material-ui/discover-more/related-projects.md create mode 100644 docs/public/material-ui/discover-more/roadmap.md create mode 100644 docs/public/material-ui/discover-more/showcase.md create mode 100644 docs/public/material-ui/discover-more/vision.md create mode 100644 docs/public/material-ui/experimental-api/classname-generator.md create mode 100644 docs/public/material-ui/experimental-api/pigment-css.md create mode 100644 docs/public/material-ui/getting-started/design-resources.md create mode 100644 docs/public/material-ui/getting-started/example-projects.md create mode 100644 docs/public/material-ui/getting-started/faq.md create mode 100644 docs/public/material-ui/getting-started/installation.md create mode 100644 docs/public/material-ui/getting-started/learn.md create mode 100644 docs/public/material-ui/getting-started/mcp.md create mode 100644 docs/public/material-ui/getting-started/support.md create mode 100644 docs/public/material-ui/getting-started/supported-components.md create mode 100644 docs/public/material-ui/getting-started/supported-platforms.md create mode 100644 docs/public/material-ui/getting-started/templates.md create mode 100644 docs/public/material-ui/getting-started/usage.md create mode 100644 docs/public/material-ui/guides/api.md create mode 100644 docs/public/material-ui/guides/building-extensible-themes.md create mode 100644 docs/public/material-ui/guides/composition.md create mode 100644 docs/public/material-ui/guides/content-security-policy.md create mode 100644 docs/public/material-ui/guides/localization.md create mode 100644 docs/public/material-ui/guides/minimizing-bundle-size.md create mode 100644 docs/public/material-ui/guides/responsive-ui.md create mode 100644 docs/public/material-ui/guides/server-rendering.md create mode 100644 docs/public/material-ui/guides/testing.md create mode 100644 docs/public/material-ui/guides/typescript.md create mode 100644 docs/public/material-ui/icons.md create mode 100644 docs/public/material-ui/integrations/interoperability.md create mode 100644 docs/public/material-ui/integrations/nextjs.md create mode 100644 docs/public/material-ui/integrations/routing.md create mode 100644 docs/public/material-ui/integrations/styled-components.md create mode 100644 docs/public/material-ui/integrations/theme-scoping.md create mode 100644 docs/public/material-ui/llms.txt create mode 100644 docs/public/material-ui/migration/migrating-from-deprecated-apis.md create mode 100644 docs/public/material-ui/migration/migration-v0x.md create mode 100644 docs/public/material-ui/migration/migration-v3.md create mode 100644 docs/public/material-ui/migration/migration-v4.md create mode 100644 docs/public/material-ui/migration/pickers-migration.md create mode 100644 docs/public/material-ui/migration/upgrade-to-grid-v2.md create mode 100644 docs/public/material-ui/migration/upgrade-to-v6.md create mode 100644 docs/public/material-ui/migration/upgrade-to-v7.md create mode 100644 docs/public/material-ui/react-accordion.md create mode 100644 docs/public/material-ui/react-alert.md create mode 100644 docs/public/material-ui/react-app-bar.md create mode 100644 docs/public/material-ui/react-autocomplete.md create mode 100644 docs/public/material-ui/react-avatar.md create mode 100644 docs/public/material-ui/react-backdrop.md create mode 100644 docs/public/material-ui/react-badge.md create mode 100644 docs/public/material-ui/react-bottom-navigation.md create mode 100644 docs/public/material-ui/react-box.md create mode 100644 docs/public/material-ui/react-breadcrumbs.md create mode 100644 docs/public/material-ui/react-button-group.md create mode 100644 docs/public/material-ui/react-button.md create mode 100644 docs/public/material-ui/react-card.md create mode 100644 docs/public/material-ui/react-checkbox.md create mode 100644 docs/public/material-ui/react-chip.md create mode 100644 docs/public/material-ui/react-click-away-listener.md create mode 100644 docs/public/material-ui/react-container.md create mode 100644 docs/public/material-ui/react-css-baseline.md create mode 100644 docs/public/material-ui/react-dialog.md create mode 100644 docs/public/material-ui/react-divider.md create mode 100644 docs/public/material-ui/react-drawer.md create mode 100644 docs/public/material-ui/react-floating-action-button.md create mode 100644 docs/public/material-ui/react-grid-legacy.md create mode 100644 docs/public/material-ui/react-grid.md create mode 100644 docs/public/material-ui/react-image-list.md create mode 100644 docs/public/material-ui/react-init-color-scheme-script.md create mode 100644 docs/public/material-ui/react-link.md create mode 100644 docs/public/material-ui/react-list.md create mode 100644 docs/public/material-ui/react-masonry.md create mode 100644 docs/public/material-ui/react-menu.md create mode 100644 docs/public/material-ui/react-modal.md create mode 100644 docs/public/material-ui/react-no-ssr.md create mode 100644 docs/public/material-ui/react-pagination.md create mode 100644 docs/public/material-ui/react-paper.md create mode 100644 docs/public/material-ui/react-popover.md create mode 100644 docs/public/material-ui/react-popper.md create mode 100644 docs/public/material-ui/react-portal.md create mode 100644 docs/public/material-ui/react-progress.md create mode 100644 docs/public/material-ui/react-radio-button.md create mode 100644 docs/public/material-ui/react-rating.md create mode 100644 docs/public/material-ui/react-select.md create mode 100644 docs/public/material-ui/react-skeleton.md create mode 100644 docs/public/material-ui/react-slider.md create mode 100644 docs/public/material-ui/react-snackbar.md create mode 100644 docs/public/material-ui/react-speed-dial.md create mode 100644 docs/public/material-ui/react-stack.md create mode 100644 docs/public/material-ui/react-stepper.md create mode 100644 docs/public/material-ui/react-switch.md create mode 100644 docs/public/material-ui/react-table.md create mode 100644 docs/public/material-ui/react-tabs.md create mode 100644 docs/public/material-ui/react-text-field.md create mode 100644 docs/public/material-ui/react-textarea-autosize.md create mode 100644 docs/public/material-ui/react-timeline.md create mode 100644 docs/public/material-ui/react-toggle-button.md create mode 100644 docs/public/material-ui/react-tooltip.md create mode 100644 docs/public/material-ui/react-transfer-list.md create mode 100644 docs/public/material-ui/react-typography.md create mode 100644 docs/public/material-ui/react-use-media-query.md create mode 100644 docs/public/material-ui/transitions.md diff --git a/docs/pages/experiments/index.js b/docs/pages/experiments/index.js index a4349734f9720b..1a27c3e9fde5bf 100644 --- a/docs/pages/experiments/index.js +++ b/docs/pages/experiments/index.js @@ -138,7 +138,7 @@ export default function Experiments({ experiments }) { ); } -Experiments.getInitialProps = () => { +export async function getStaticProps() { const experiments = []; const req = require.context('./', true, /^\.\/.*(? { }); return { - experiments, + props: { + experiments, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/accordion-details.js b/docs/pages/joy-ui/api/accordion-details.js index 708f39a7ccfafe..deeb6553438151 100644 --- a/docs/pages/joy-ui/api/accordion-details.js +++ b/docs/pages/joy-ui/api/accordion-details.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/accordion-details', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/accordion-group.js b/docs/pages/joy-ui/api/accordion-group.js index c405ade6fe9247..c8373f3d7e3a67 100644 --- a/docs/pages/joy-ui/api/accordion-group.js +++ b/docs/pages/joy-ui/api/accordion-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/accordion-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/accordion-summary.js b/docs/pages/joy-ui/api/accordion-summary.js index b9ee5fe3cb7e57..eeb134f8283060 100644 --- a/docs/pages/joy-ui/api/accordion-summary.js +++ b/docs/pages/joy-ui/api/accordion-summary.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/accordion-summary', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/accordion.js b/docs/pages/joy-ui/api/accordion.js index df4f8a8699b8c1..12bd325ed7a2f3 100644 --- a/docs/pages/joy-ui/api/accordion.js +++ b/docs/pages/joy-ui/api/accordion.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/accordion', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/alert.js b/docs/pages/joy-ui/api/alert.js index 5ef04072406375..40bc6a9eb14d03 100644 --- a/docs/pages/joy-ui/api/alert.js +++ b/docs/pages/joy-ui/api/alert.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/alert', false, /\.\/alert.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/aspect-ratio.js b/docs/pages/joy-ui/api/aspect-ratio.js index 48b3e48b0a119e..4b895af58d2598 100644 --- a/docs/pages/joy-ui/api/aspect-ratio.js +++ b/docs/pages/joy-ui/api/aspect-ratio.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/aspect-ratio', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/autocomplete-listbox.js b/docs/pages/joy-ui/api/autocomplete-listbox.js index 3b033199618665..076928ee9871dd 100644 --- a/docs/pages/joy-ui/api/autocomplete-listbox.js +++ b/docs/pages/joy-ui/api/autocomplete-listbox.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/autocomplete-listbox', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/autocomplete-option.js b/docs/pages/joy-ui/api/autocomplete-option.js index 00548e5df20b8d..4f9b24ac1a3156 100644 --- a/docs/pages/joy-ui/api/autocomplete-option.js +++ b/docs/pages/joy-ui/api/autocomplete-option.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/autocomplete-option', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/autocomplete.js b/docs/pages/joy-ui/api/autocomplete.js index a88ecbd54f4c63..2119b930ac64ec 100644 --- a/docs/pages/joy-ui/api/autocomplete.js +++ b/docs/pages/joy-ui/api/autocomplete.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/autocomplete', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/avatar-group.js b/docs/pages/joy-ui/api/avatar-group.js index efc7c2615ae065..829bfa73f213d8 100644 --- a/docs/pages/joy-ui/api/avatar-group.js +++ b/docs/pages/joy-ui/api/avatar-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/avatar-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/avatar.js b/docs/pages/joy-ui/api/avatar.js index f56b42f5636044..b4c0d63d4355cb 100644 --- a/docs/pages/joy-ui/api/avatar.js +++ b/docs/pages/joy-ui/api/avatar.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/avatar', false, /\.\/avatar.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/badge.js b/docs/pages/joy-ui/api/badge.js index f0bc587eb44f8b..563705c6a7bfc2 100644 --- a/docs/pages/joy-ui/api/badge.js +++ b/docs/pages/joy-ui/api/badge.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/badge', false, /\.\/badge.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/box.js b/docs/pages/joy-ui/api/box.js index de22c574d59f28..7bfde26c64f9c5 100644 --- a/docs/pages/joy-ui/api/box.js +++ b/docs/pages/joy-ui/api/box.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/box', false, /\.\/box.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/breadcrumbs.js b/docs/pages/joy-ui/api/breadcrumbs.js index d35755c5722cf7..d8388b9f34cd5a 100644 --- a/docs/pages/joy-ui/api/breadcrumbs.js +++ b/docs/pages/joy-ui/api/breadcrumbs.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/breadcrumbs', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/button-group.js b/docs/pages/joy-ui/api/button-group.js index 7922dc669c0b34..4d686ee2046c39 100644 --- a/docs/pages/joy-ui/api/button-group.js +++ b/docs/pages/joy-ui/api/button-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/button-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/button.js b/docs/pages/joy-ui/api/button.js index a63237b7b41270..1aa543bb8bfc77 100644 --- a/docs/pages/joy-ui/api/button.js +++ b/docs/pages/joy-ui/api/button.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/button', false, /\.\/button.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/card-actions.js b/docs/pages/joy-ui/api/card-actions.js index 02fd02ec462288..c4cbefc4c1067e 100644 --- a/docs/pages/joy-ui/api/card-actions.js +++ b/docs/pages/joy-ui/api/card-actions.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/card-actions', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/card-content.js b/docs/pages/joy-ui/api/card-content.js index c6ba3f8a4bc2e2..0fb05730b2d167 100644 --- a/docs/pages/joy-ui/api/card-content.js +++ b/docs/pages/joy-ui/api/card-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/card-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/card-cover.js b/docs/pages/joy-ui/api/card-cover.js index 139aa8bf269947..6b9131259ccd6d 100644 --- a/docs/pages/joy-ui/api/card-cover.js +++ b/docs/pages/joy-ui/api/card-cover.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/card-cover', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/card-overflow.js b/docs/pages/joy-ui/api/card-overflow.js index 92306d7e8494eb..031894da590e26 100644 --- a/docs/pages/joy-ui/api/card-overflow.js +++ b/docs/pages/joy-ui/api/card-overflow.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/card-overflow', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/card.js b/docs/pages/joy-ui/api/card.js index d666f4940dae2a..13236869850e62 100644 --- a/docs/pages/joy-ui/api/card.js +++ b/docs/pages/joy-ui/api/card.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/card', false, /\.\/card.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/checkbox.js b/docs/pages/joy-ui/api/checkbox.js index 8e2ba8873f696a..2733259041ed11 100644 --- a/docs/pages/joy-ui/api/checkbox.js +++ b/docs/pages/joy-ui/api/checkbox.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/checkbox', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/chip-delete.js b/docs/pages/joy-ui/api/chip-delete.js index 508e66d78a7b55..1225e84e821117 100644 --- a/docs/pages/joy-ui/api/chip-delete.js +++ b/docs/pages/joy-ui/api/chip-delete.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/chip-delete', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/chip.js b/docs/pages/joy-ui/api/chip.js index e264c69e4509a5..2a1f29a5a4fd4c 100644 --- a/docs/pages/joy-ui/api/chip.js +++ b/docs/pages/joy-ui/api/chip.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/chip', false, /\.\/chip.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/circular-progress.js b/docs/pages/joy-ui/api/circular-progress.js index feac4b351e3fdc..212aaf60922438 100644 --- a/docs/pages/joy-ui/api/circular-progress.js +++ b/docs/pages/joy-ui/api/circular-progress.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/circular-progress', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/css-baseline.js b/docs/pages/joy-ui/api/css-baseline.js index d375bbb575ac03..e1bc2afd9c97e3 100644 --- a/docs/pages/joy-ui/api/css-baseline.js +++ b/docs/pages/joy-ui/api/css-baseline.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/css-baseline', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/dialog-actions.js b/docs/pages/joy-ui/api/dialog-actions.js index 10901b33ce38af..4c1811f76b8091 100644 --- a/docs/pages/joy-ui/api/dialog-actions.js +++ b/docs/pages/joy-ui/api/dialog-actions.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/dialog-actions', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/dialog-content.js b/docs/pages/joy-ui/api/dialog-content.js index 43da9d52ce80bb..3fb7d5752722bd 100644 --- a/docs/pages/joy-ui/api/dialog-content.js +++ b/docs/pages/joy-ui/api/dialog-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/dialog-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/dialog-title.js b/docs/pages/joy-ui/api/dialog-title.js index ea4f5ecbb2f845..fd408d0b682713 100644 --- a/docs/pages/joy-ui/api/dialog-title.js +++ b/docs/pages/joy-ui/api/dialog-title.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/dialog-title', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/divider.js b/docs/pages/joy-ui/api/divider.js index 0eb73a25609875..0f1af6ac84c009 100644 --- a/docs/pages/joy-ui/api/divider.js +++ b/docs/pages/joy-ui/api/divider.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/divider', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/drawer.js b/docs/pages/joy-ui/api/drawer.js index f5fb379409fce3..6494585278993e 100644 --- a/docs/pages/joy-ui/api/drawer.js +++ b/docs/pages/joy-ui/api/drawer.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/drawer', false, /\.\/drawer.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/form-control.js b/docs/pages/joy-ui/api/form-control.js index 743ee0048ecf18..87914029ed539f 100644 --- a/docs/pages/joy-ui/api/form-control.js +++ b/docs/pages/joy-ui/api/form-control.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/form-control', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/form-helper-text.js b/docs/pages/joy-ui/api/form-helper-text.js index 19ead9d723ccef..c180d9323f8e29 100644 --- a/docs/pages/joy-ui/api/form-helper-text.js +++ b/docs/pages/joy-ui/api/form-helper-text.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/form-helper-text', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/form-label.js b/docs/pages/joy-ui/api/form-label.js index 598b75d6e69390..08c4e04d7ce72b 100644 --- a/docs/pages/joy-ui/api/form-label.js +++ b/docs/pages/joy-ui/api/form-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/form-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/grid.js b/docs/pages/joy-ui/api/grid.js index 022175a258140f..d512101c3834f2 100644 --- a/docs/pages/joy-ui/api/grid.js +++ b/docs/pages/joy-ui/api/grid.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/grid', false, /\.\/grid.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/icon-button.js b/docs/pages/joy-ui/api/icon-button.js index 914488209d0497..312c989cb2f4dd 100644 --- a/docs/pages/joy-ui/api/icon-button.js +++ b/docs/pages/joy-ui/api/icon-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/icon-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/input.js b/docs/pages/joy-ui/api/input.js index 4f59deddae07b7..31220f21d0c59b 100644 --- a/docs/pages/joy-ui/api/input.js +++ b/docs/pages/joy-ui/api/input.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/input', false, /\.\/input.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/linear-progress.js b/docs/pages/joy-ui/api/linear-progress.js index 2656ed5c3c1014..5c82b5d116beab 100644 --- a/docs/pages/joy-ui/api/linear-progress.js +++ b/docs/pages/joy-ui/api/linear-progress.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/linear-progress', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/link.js b/docs/pages/joy-ui/api/link.js index b6ca4fd8315191..80454e6e7d060c 100644 --- a/docs/pages/joy-ui/api/link.js +++ b/docs/pages/joy-ui/api/link.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/link', false, /\.\/link.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-divider.js b/docs/pages/joy-ui/api/list-divider.js index 73d984a77b242a..586d442ac902ea 100644 --- a/docs/pages/joy-ui/api/list-divider.js +++ b/docs/pages/joy-ui/api/list-divider.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-divider', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-item-button.js b/docs/pages/joy-ui/api/list-item-button.js index b0d07c8eb815bc..a90b43616f7503 100644 --- a/docs/pages/joy-ui/api/list-item-button.js +++ b/docs/pages/joy-ui/api/list-item-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-item-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-item-content.js b/docs/pages/joy-ui/api/list-item-content.js index c760f66a170c2c..f5e720a13f614d 100644 --- a/docs/pages/joy-ui/api/list-item-content.js +++ b/docs/pages/joy-ui/api/list-item-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-item-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-item-decorator.js b/docs/pages/joy-ui/api/list-item-decorator.js index 54558675f64c4a..8d9c86e4f30078 100644 --- a/docs/pages/joy-ui/api/list-item-decorator.js +++ b/docs/pages/joy-ui/api/list-item-decorator.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-item-decorator', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-item.js b/docs/pages/joy-ui/api/list-item.js index e9abe9bc12bbce..511a8c0134a91d 100644 --- a/docs/pages/joy-ui/api/list-item.js +++ b/docs/pages/joy-ui/api/list-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list-subheader.js b/docs/pages/joy-ui/api/list-subheader.js index 2adb185afe88ef..5190e29e76efe8 100644 --- a/docs/pages/joy-ui/api/list-subheader.js +++ b/docs/pages/joy-ui/api/list-subheader.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/list-subheader', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/list.js b/docs/pages/joy-ui/api/list.js index 90b641ad87bcb3..b1402a70c173cb 100644 --- a/docs/pages/joy-ui/api/list.js +++ b/docs/pages/joy-ui/api/list.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/list', false, /\.\/list.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/menu-button.js b/docs/pages/joy-ui/api/menu-button.js index f145fbadc5abad..da05dabf20db1d 100644 --- a/docs/pages/joy-ui/api/menu-button.js +++ b/docs/pages/joy-ui/api/menu-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/menu-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/menu-item.js b/docs/pages/joy-ui/api/menu-item.js index 2346df64e596d4..e906d82325c1d4 100644 --- a/docs/pages/joy-ui/api/menu-item.js +++ b/docs/pages/joy-ui/api/menu-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/menu-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/menu-list.js b/docs/pages/joy-ui/api/menu-list.js index e9600d4e7f1df1..80cef75607b80e 100644 --- a/docs/pages/joy-ui/api/menu-list.js +++ b/docs/pages/joy-ui/api/menu-list.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/menu-list', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/menu.js b/docs/pages/joy-ui/api/menu.js index e2da1425483459..908f8d6813d0a0 100644 --- a/docs/pages/joy-ui/api/menu.js +++ b/docs/pages/joy-ui/api/menu.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/menu', false, /\.\/menu.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/modal-close.js b/docs/pages/joy-ui/api/modal-close.js index 5832d61bfdb374..13ddafb1ee17ed 100644 --- a/docs/pages/joy-ui/api/modal-close.js +++ b/docs/pages/joy-ui/api/modal-close.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/modal-close', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/modal-dialog.js b/docs/pages/joy-ui/api/modal-dialog.js index 82d52b3abbc4fd..9d0634706738a3 100644 --- a/docs/pages/joy-ui/api/modal-dialog.js +++ b/docs/pages/joy-ui/api/modal-dialog.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/modal-dialog', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/modal-overflow.js b/docs/pages/joy-ui/api/modal-overflow.js index e1dedb4a09df3a..d92643d5211183 100644 --- a/docs/pages/joy-ui/api/modal-overflow.js +++ b/docs/pages/joy-ui/api/modal-overflow.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/modal-overflow', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/modal.js b/docs/pages/joy-ui/api/modal.js index 1060ae4e2bd91c..3b266a448950e0 100644 --- a/docs/pages/joy-ui/api/modal.js +++ b/docs/pages/joy-ui/api/modal.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/modal', false, /\.\/modal.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/option.js b/docs/pages/joy-ui/api/option.js index 31f18d011a98cd..a0664460e16c66 100644 --- a/docs/pages/joy-ui/api/option.js +++ b/docs/pages/joy-ui/api/option.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/option', false, /\.\/option.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/radio-group.js b/docs/pages/joy-ui/api/radio-group.js index 4d9f1de7538934..4579260d7b60b5 100644 --- a/docs/pages/joy-ui/api/radio-group.js +++ b/docs/pages/joy-ui/api/radio-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/radio-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/radio.js b/docs/pages/joy-ui/api/radio.js index ebe4d0f9698bdd..e9ea7ef8485095 100644 --- a/docs/pages/joy-ui/api/radio.js +++ b/docs/pages/joy-ui/api/radio.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/radio', false, /\.\/radio.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/scoped-css-baseline.js b/docs/pages/joy-ui/api/scoped-css-baseline.js index 5f31ec87938908..ec3ac33c86199f 100644 --- a/docs/pages/joy-ui/api/scoped-css-baseline.js +++ b/docs/pages/joy-ui/api/scoped-css-baseline.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/scoped-css-baseline', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/select.js b/docs/pages/joy-ui/api/select.js index 0f6db7ac41ed14..17429ea5dcf67a 100644 --- a/docs/pages/joy-ui/api/select.js +++ b/docs/pages/joy-ui/api/select.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/select', false, /\.\/select.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/sheet.js b/docs/pages/joy-ui/api/sheet.js index 61af2d2362a748..cdc78c54c98215 100644 --- a/docs/pages/joy-ui/api/sheet.js +++ b/docs/pages/joy-ui/api/sheet.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/sheet', false, /\.\/sheet.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/skeleton.js b/docs/pages/joy-ui/api/skeleton.js index 355cd9e52fc2d8..d49c801003554c 100644 --- a/docs/pages/joy-ui/api/skeleton.js +++ b/docs/pages/joy-ui/api/skeleton.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/skeleton', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/slider.js b/docs/pages/joy-ui/api/slider.js index 66cb9ea629a8e2..bc486ef106a402 100644 --- a/docs/pages/joy-ui/api/slider.js +++ b/docs/pages/joy-ui/api/slider.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/slider', false, /\.\/slider.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/snackbar.js b/docs/pages/joy-ui/api/snackbar.js index 7d6d61a350d1c5..ebaf6de597311e 100644 --- a/docs/pages/joy-ui/api/snackbar.js +++ b/docs/pages/joy-ui/api/snackbar.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/snackbar', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/stack.js b/docs/pages/joy-ui/api/stack.js index 44ee7dca3bdd96..5d8135a12f07f4 100644 --- a/docs/pages/joy-ui/api/stack.js +++ b/docs/pages/joy-ui/api/stack.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/stack', false, /\.\/stack.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/step-button.js b/docs/pages/joy-ui/api/step-button.js index 29e49d7964102a..8f2b1453ef213f 100644 --- a/docs/pages/joy-ui/api/step-button.js +++ b/docs/pages/joy-ui/api/step-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/step-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/step-indicator.js b/docs/pages/joy-ui/api/step-indicator.js index 2cf917bd9ebb18..74f2a47d14bb95 100644 --- a/docs/pages/joy-ui/api/step-indicator.js +++ b/docs/pages/joy-ui/api/step-indicator.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/step-indicator', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/step.js b/docs/pages/joy-ui/api/step.js index 68ec47b8519c88..3b06d470c89e02 100644 --- a/docs/pages/joy-ui/api/step.js +++ b/docs/pages/joy-ui/api/step.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/step', false, /\.\/step.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/stepper.js b/docs/pages/joy-ui/api/stepper.js index 718872f62dfce6..4aac40d5723640 100644 --- a/docs/pages/joy-ui/api/stepper.js +++ b/docs/pages/joy-ui/api/stepper.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/stepper', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/svg-icon.js b/docs/pages/joy-ui/api/svg-icon.js index 4f314a093b3821..3c29658b49062e 100644 --- a/docs/pages/joy-ui/api/svg-icon.js +++ b/docs/pages/joy-ui/api/svg-icon.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/svg-icon', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/switch.js b/docs/pages/joy-ui/api/switch.js index fc769a058144a8..8a3cea60356752 100644 --- a/docs/pages/joy-ui/api/switch.js +++ b/docs/pages/joy-ui/api/switch.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/switch', false, /\.\/switch.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/tab-list.js b/docs/pages/joy-ui/api/tab-list.js index 0ddb09b314dff4..f22b55bd76cde1 100644 --- a/docs/pages/joy-ui/api/tab-list.js +++ b/docs/pages/joy-ui/api/tab-list.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/tab-list', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/tab-panel.js b/docs/pages/joy-ui/api/tab-panel.js index 1e5a18fee976c6..d4858e9c0c79dd 100644 --- a/docs/pages/joy-ui/api/tab-panel.js +++ b/docs/pages/joy-ui/api/tab-panel.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/tab-panel', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/tab.js b/docs/pages/joy-ui/api/tab.js index e54297471d7456..0653c2deacb74a 100644 --- a/docs/pages/joy-ui/api/tab.js +++ b/docs/pages/joy-ui/api/tab.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/tab', false, /\.\/tab.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/table.js b/docs/pages/joy-ui/api/table.js index 5724eedaf053c2..713d5f42708e4a 100644 --- a/docs/pages/joy-ui/api/table.js +++ b/docs/pages/joy-ui/api/table.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/table', false, /\.\/table.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/tabs.js b/docs/pages/joy-ui/api/tabs.js index aef2ec7ea41d84..952ecf89d7f81f 100644 --- a/docs/pages/joy-ui/api/tabs.js +++ b/docs/pages/joy-ui/api/tabs.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs-joy/tabs', false, /\.\/tabs.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/textarea.js b/docs/pages/joy-ui/api/textarea.js index c06359829e79bd..b94fb4a4661f8b 100644 --- a/docs/pages/joy-ui/api/textarea.js +++ b/docs/pages/joy-ui/api/textarea.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/textarea', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/toggle-button-group.js b/docs/pages/joy-ui/api/toggle-button-group.js index 21d3f75a52f0e2..fb03c7ec48efa5 100644 --- a/docs/pages/joy-ui/api/toggle-button-group.js +++ b/docs/pages/joy-ui/api/toggle-button-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/toggle-button-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/tooltip.js b/docs/pages/joy-ui/api/tooltip.js index 28ed606c703822..9e33ff5b251b20 100644 --- a/docs/pages/joy-ui/api/tooltip.js +++ b/docs/pages/joy-ui/api/tooltip.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/tooltip', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/joy-ui/api/typography.js b/docs/pages/joy-ui/api/typography.js index 30b8b905bc1dda..ea4e4ae51f6c4c 100644 --- a/docs/pages/joy-ui/api/typography.js +++ b/docs/pages/joy-ui/api/typography.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs-joy/typography', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/accordion-actions.js b/docs/pages/material-ui/api/accordion-actions.js index daa77e98bf1612..278ed16f0a8227 100644 --- a/docs/pages/material-ui/api/accordion-actions.js +++ b/docs/pages/material-ui/api/accordion-actions.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/accordion-actions', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/accordion-details.js b/docs/pages/material-ui/api/accordion-details.js index 96bafdd62f2cc9..3932983cea35c1 100644 --- a/docs/pages/material-ui/api/accordion-details.js +++ b/docs/pages/material-ui/api/accordion-details.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/accordion-details', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/accordion-summary.js b/docs/pages/material-ui/api/accordion-summary.js index de567814596092..d9a0115cb27d17 100644 --- a/docs/pages/material-ui/api/accordion-summary.js +++ b/docs/pages/material-ui/api/accordion-summary.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/accordion-summary', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/accordion.js b/docs/pages/material-ui/api/accordion.js index 72eca9a56f97fc..2124a2b4ecf1a4 100644 --- a/docs/pages/material-ui/api/accordion.js +++ b/docs/pages/material-ui/api/accordion.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/accordion', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/alert-title.js b/docs/pages/material-ui/api/alert-title.js index 920586724e9ed7..7741d2d0b6afd4 100644 --- a/docs/pages/material-ui/api/alert-title.js +++ b/docs/pages/material-ui/api/alert-title.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/alert-title', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/alert.js b/docs/pages/material-ui/api/alert.js index 6e8c685a11348c..94ba51f5155612 100644 --- a/docs/pages/material-ui/api/alert.js +++ b/docs/pages/material-ui/api/alert.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/alert', false, /\.\/alert.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/app-bar.js b/docs/pages/material-ui/api/app-bar.js index e8ea6b7ef9d93d..0ab1114b63a2b8 100644 --- a/docs/pages/material-ui/api/app-bar.js +++ b/docs/pages/material-ui/api/app-bar.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/app-bar', false, /\.\/app-bar.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/autocomplete.js b/docs/pages/material-ui/api/autocomplete.js index 677e037ca48031..fd27bb515e69f0 100644 --- a/docs/pages/material-ui/api/autocomplete.js +++ b/docs/pages/material-ui/api/autocomplete.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/autocomplete', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/avatar-group.js b/docs/pages/material-ui/api/avatar-group.js index 3b396d7a6747a1..1888402d1dc724 100644 --- a/docs/pages/material-ui/api/avatar-group.js +++ b/docs/pages/material-ui/api/avatar-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/avatar-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/avatar.js b/docs/pages/material-ui/api/avatar.js index 2e1624ac534909..78dc3e2406faaa 100644 --- a/docs/pages/material-ui/api/avatar.js +++ b/docs/pages/material-ui/api/avatar.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/avatar', false, /\.\/avatar.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/backdrop.js b/docs/pages/material-ui/api/backdrop.js index b50c0688dbeb55..55b4aae2a1554e 100644 --- a/docs/pages/material-ui/api/backdrop.js +++ b/docs/pages/material-ui/api/backdrop.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/backdrop', false, /\.\/backdrop.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/badge.js b/docs/pages/material-ui/api/badge.js index 4e724bf443e326..4140e090a5e8af 100644 --- a/docs/pages/material-ui/api/badge.js +++ b/docs/pages/material-ui/api/badge.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/badge', false, /\.\/badge.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/bottom-navigation-action.js b/docs/pages/material-ui/api/bottom-navigation-action.js index a5701c57e895ea..54af67d8c626b3 100644 --- a/docs/pages/material-ui/api/bottom-navigation-action.js +++ b/docs/pages/material-ui/api/bottom-navigation-action.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/bottom-navigation-action', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/bottom-navigation.js b/docs/pages/material-ui/api/bottom-navigation.js index f0fcd5be82c6f4..94c3ed8398e7ed 100644 --- a/docs/pages/material-ui/api/bottom-navigation.js +++ b/docs/pages/material-ui/api/bottom-navigation.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/bottom-navigation', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/box.js b/docs/pages/material-ui/api/box.js index 476c932ffc5819..ba3a20bc5821a4 100644 --- a/docs/pages/material-ui/api/box.js +++ b/docs/pages/material-ui/api/box.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/box', false, /\.\/box.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/breadcrumbs.js b/docs/pages/material-ui/api/breadcrumbs.js index bea76e277dbc72..a270cd791f7ab7 100644 --- a/docs/pages/material-ui/api/breadcrumbs.js +++ b/docs/pages/material-ui/api/breadcrumbs.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/breadcrumbs', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/button-base.js b/docs/pages/material-ui/api/button-base.js index 4b0b45a150a9ec..1abf9481381bcb 100644 --- a/docs/pages/material-ui/api/button-base.js +++ b/docs/pages/material-ui/api/button-base.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/button-base', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/button-group.js b/docs/pages/material-ui/api/button-group.js index 6d686a978294fd..b9cc189d525281 100644 --- a/docs/pages/material-ui/api/button-group.js +++ b/docs/pages/material-ui/api/button-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/button-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/button.js b/docs/pages/material-ui/api/button.js index 981d250098dcbd..58e11d489e3fc9 100644 --- a/docs/pages/material-ui/api/button.js +++ b/docs/pages/material-ui/api/button.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/button', false, /\.\/button.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card-action-area.js b/docs/pages/material-ui/api/card-action-area.js index 2f33db55f3952c..766ba0b52d3cfa 100644 --- a/docs/pages/material-ui/api/card-action-area.js +++ b/docs/pages/material-ui/api/card-action-area.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/card-action-area', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card-actions.js b/docs/pages/material-ui/api/card-actions.js index 9f83ba2ed6e126..616f80b1673d93 100644 --- a/docs/pages/material-ui/api/card-actions.js +++ b/docs/pages/material-ui/api/card-actions.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/card-actions', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card-content.js b/docs/pages/material-ui/api/card-content.js index 8bc71044bb7a1c..31b5085032976d 100644 --- a/docs/pages/material-ui/api/card-content.js +++ b/docs/pages/material-ui/api/card-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/card-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card-header.js b/docs/pages/material-ui/api/card-header.js index d4b52a74306c54..efbfaf09146fe5 100644 --- a/docs/pages/material-ui/api/card-header.js +++ b/docs/pages/material-ui/api/card-header.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/card-header', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card-media.js b/docs/pages/material-ui/api/card-media.js index 8a2dad7d96aa60..591e95afec154f 100644 --- a/docs/pages/material-ui/api/card-media.js +++ b/docs/pages/material-ui/api/card-media.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/card-media', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/card.js b/docs/pages/material-ui/api/card.js index bc2b79bd79d501..dec890bb59ed5e 100644 --- a/docs/pages/material-ui/api/card.js +++ b/docs/pages/material-ui/api/card.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/card', false, /\.\/card.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/checkbox.js b/docs/pages/material-ui/api/checkbox.js index 8ef7ae91394939..054ea1ba0fa1ff 100644 --- a/docs/pages/material-ui/api/checkbox.js +++ b/docs/pages/material-ui/api/checkbox.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/checkbox', false, /\.\/checkbox.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/chip.js b/docs/pages/material-ui/api/chip.js index 51e6136ac11552..48ce0669d3e854 100644 --- a/docs/pages/material-ui/api/chip.js +++ b/docs/pages/material-ui/api/chip.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/chip', false, /\.\/chip.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/circular-progress.js b/docs/pages/material-ui/api/circular-progress.js index a3332e6912c459..6e117407496e83 100644 --- a/docs/pages/material-ui/api/circular-progress.js +++ b/docs/pages/material-ui/api/circular-progress.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/circular-progress', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/click-away-listener.js b/docs/pages/material-ui/api/click-away-listener.js index 3776a973527b16..72e16d2008b06a 100644 --- a/docs/pages/material-ui/api/click-away-listener.js +++ b/docs/pages/material-ui/api/click-away-listener.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/click-away-listener', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/collapse.js b/docs/pages/material-ui/api/collapse.js index 6c71a92b3e4bf3..d9d3a8b7d1d9cf 100644 --- a/docs/pages/material-ui/api/collapse.js +++ b/docs/pages/material-ui/api/collapse.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/collapse', false, /\.\/collapse.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/container.js b/docs/pages/material-ui/api/container.js index bb6b55f6601af5..090f1ad28f992f 100644 --- a/docs/pages/material-ui/api/container.js +++ b/docs/pages/material-ui/api/container.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/container', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/css-baseline.js b/docs/pages/material-ui/api/css-baseline.js index 65165dae53fca7..47e1fbffbad1f4 100644 --- a/docs/pages/material-ui/api/css-baseline.js +++ b/docs/pages/material-ui/api/css-baseline.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/css-baseline', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/dialog-actions.js b/docs/pages/material-ui/api/dialog-actions.js index d82a668745b059..fb161cb9b709ff 100644 --- a/docs/pages/material-ui/api/dialog-actions.js +++ b/docs/pages/material-ui/api/dialog-actions.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/dialog-actions', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/dialog-content-text.js b/docs/pages/material-ui/api/dialog-content-text.js index 74c81709d4f5ff..c3700d6085030a 100644 --- a/docs/pages/material-ui/api/dialog-content-text.js +++ b/docs/pages/material-ui/api/dialog-content-text.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/dialog-content-text', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/dialog-content.js b/docs/pages/material-ui/api/dialog-content.js index df4ed11984163b..94e9c8b25a8686 100644 --- a/docs/pages/material-ui/api/dialog-content.js +++ b/docs/pages/material-ui/api/dialog-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/dialog-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/dialog-title.js b/docs/pages/material-ui/api/dialog-title.js index b4968de23ea606..54a97304e73800 100644 --- a/docs/pages/material-ui/api/dialog-title.js +++ b/docs/pages/material-ui/api/dialog-title.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/dialog-title', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/dialog.js b/docs/pages/material-ui/api/dialog.js index 7c47570b42f35b..b53724dd2921fe 100644 --- a/docs/pages/material-ui/api/dialog.js +++ b/docs/pages/material-ui/api/dialog.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/dialog', false, /\.\/dialog.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/divider.js b/docs/pages/material-ui/api/divider.js index efc22c3db47ea6..55549ebe4873e5 100644 --- a/docs/pages/material-ui/api/divider.js +++ b/docs/pages/material-ui/api/divider.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/divider', false, /\.\/divider.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/drawer.js b/docs/pages/material-ui/api/drawer.js index f7eb620e50ca56..c45f2e3970f33a 100644 --- a/docs/pages/material-ui/api/drawer.js +++ b/docs/pages/material-ui/api/drawer.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/drawer', false, /\.\/drawer.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/fab.js b/docs/pages/material-ui/api/fab.js index 01e75d02c36ed5..95d24780e8f05a 100644 --- a/docs/pages/material-ui/api/fab.js +++ b/docs/pages/material-ui/api/fab.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/fab', false, /\.\/fab.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/fade.js b/docs/pages/material-ui/api/fade.js index a5ee08308f3b34..5fb8719ad1b219 100644 --- a/docs/pages/material-ui/api/fade.js +++ b/docs/pages/material-ui/api/fade.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/fade', false, /\.\/fade.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/filled-input.js b/docs/pages/material-ui/api/filled-input.js index 4425826e1ab794..3c3d07c9ed7eed 100644 --- a/docs/pages/material-ui/api/filled-input.js +++ b/docs/pages/material-ui/api/filled-input.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/filled-input', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/form-control-label.js b/docs/pages/material-ui/api/form-control-label.js index eeb7980a7b11bb..d210fd9054f169 100644 --- a/docs/pages/material-ui/api/form-control-label.js +++ b/docs/pages/material-ui/api/form-control-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/form-control-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/form-control.js b/docs/pages/material-ui/api/form-control.js index 4b2275fb71b2e4..9cd3c4d80170fa 100644 --- a/docs/pages/material-ui/api/form-control.js +++ b/docs/pages/material-ui/api/form-control.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/form-control', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/form-group.js b/docs/pages/material-ui/api/form-group.js index 0534842365927f..a72bd89dcde8e6 100644 --- a/docs/pages/material-ui/api/form-group.js +++ b/docs/pages/material-ui/api/form-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/form-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/form-helper-text.js b/docs/pages/material-ui/api/form-helper-text.js index 6b37d4bca2e6dd..652adfbf9c4945 100644 --- a/docs/pages/material-ui/api/form-helper-text.js +++ b/docs/pages/material-ui/api/form-helper-text.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/form-helper-text', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/form-label.js b/docs/pages/material-ui/api/form-label.js index c3362eae2bd619..297ce8e64dd53d 100644 --- a/docs/pages/material-ui/api/form-label.js +++ b/docs/pages/material-ui/api/form-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/form-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/global-styles.js b/docs/pages/material-ui/api/global-styles.js index ed5b23cd24ce68..ab1af08d9f178e 100644 --- a/docs/pages/material-ui/api/global-styles.js +++ b/docs/pages/material-ui/api/global-styles.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/global-styles', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/grid-legacy.js b/docs/pages/material-ui/api/grid-legacy.js index d83dcf7b4a8b94..fee3f253919665 100644 --- a/docs/pages/material-ui/api/grid-legacy.js +++ b/docs/pages/material-ui/api/grid-legacy.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/grid-legacy', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/grid.js b/docs/pages/material-ui/api/grid.js index b365259b168867..1660a4d5487753 100644 --- a/docs/pages/material-ui/api/grid.js +++ b/docs/pages/material-ui/api/grid.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/grid', false, /\.\/grid.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/grow.js b/docs/pages/material-ui/api/grow.js index af2a1b4ac33229..7108966ada0d16 100644 --- a/docs/pages/material-ui/api/grow.js +++ b/docs/pages/material-ui/api/grow.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/grow', false, /\.\/grow.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/icon-button.js b/docs/pages/material-ui/api/icon-button.js index 011b3a5db7d38a..403fd2405b75c3 100644 --- a/docs/pages/material-ui/api/icon-button.js +++ b/docs/pages/material-ui/api/icon-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/icon-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/icon.js b/docs/pages/material-ui/api/icon.js index cde493441e312e..3a3c5a0f582f71 100644 --- a/docs/pages/material-ui/api/icon.js +++ b/docs/pages/material-ui/api/icon.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/icon', false, /\.\/icon.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/image-list-item-bar.js b/docs/pages/material-ui/api/image-list-item-bar.js index 5d8e6b2baebbe2..5e8ca259db0429 100644 --- a/docs/pages/material-ui/api/image-list-item-bar.js +++ b/docs/pages/material-ui/api/image-list-item-bar.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/image-list-item-bar', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/image-list-item.js b/docs/pages/material-ui/api/image-list-item.js index fef46c9ad261a3..8efafb89838a15 100644 --- a/docs/pages/material-ui/api/image-list-item.js +++ b/docs/pages/material-ui/api/image-list-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/image-list-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/image-list.js b/docs/pages/material-ui/api/image-list.js index 36d209f2e2a56e..49b6ed7b6ed549 100644 --- a/docs/pages/material-ui/api/image-list.js +++ b/docs/pages/material-ui/api/image-list.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/image-list', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/input-adornment.js b/docs/pages/material-ui/api/input-adornment.js index cccf601bd1ae45..316b45245f1746 100644 --- a/docs/pages/material-ui/api/input-adornment.js +++ b/docs/pages/material-ui/api/input-adornment.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/input-adornment', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/input-base.js b/docs/pages/material-ui/api/input-base.js index f132a568328587..e9f085b5df3577 100644 --- a/docs/pages/material-ui/api/input-base.js +++ b/docs/pages/material-ui/api/input-base.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/input-base', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/input-label.js b/docs/pages/material-ui/api/input-label.js index b9bc0d9c21294d..0f82982b0e7fc5 100644 --- a/docs/pages/material-ui/api/input-label.js +++ b/docs/pages/material-ui/api/input-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/input-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/input.js b/docs/pages/material-ui/api/input.js index e87049b94546bd..1a9d22fb79ef05 100644 --- a/docs/pages/material-ui/api/input.js +++ b/docs/pages/material-ui/api/input.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/input', false, /\.\/input.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/linear-progress.js b/docs/pages/material-ui/api/linear-progress.js index 4b9a5b47b182bb..8431e5387df2a3 100644 --- a/docs/pages/material-ui/api/linear-progress.js +++ b/docs/pages/material-ui/api/linear-progress.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/linear-progress', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/link.js b/docs/pages/material-ui/api/link.js index 4ef035e36316e1..12c3e1abbab87e 100644 --- a/docs/pages/material-ui/api/link.js +++ b/docs/pages/material-ui/api/link.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/link', false, /\.\/link.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item-avatar.js b/docs/pages/material-ui/api/list-item-avatar.js index 3332447547cef2..264cb7d8945543 100644 --- a/docs/pages/material-ui/api/list-item-avatar.js +++ b/docs/pages/material-ui/api/list-item-avatar.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item-avatar', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item-button.js b/docs/pages/material-ui/api/list-item-button.js index c343b32638b4f2..d8848574fc1e68 100644 --- a/docs/pages/material-ui/api/list-item-button.js +++ b/docs/pages/material-ui/api/list-item-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item-icon.js b/docs/pages/material-ui/api/list-item-icon.js index ac46706167c5c3..06ff499732620a 100644 --- a/docs/pages/material-ui/api/list-item-icon.js +++ b/docs/pages/material-ui/api/list-item-icon.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item-icon', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item-secondary-action.js b/docs/pages/material-ui/api/list-item-secondary-action.js index ad37eb33473977..9e3de7584f3157 100644 --- a/docs/pages/material-ui/api/list-item-secondary-action.js +++ b/docs/pages/material-ui/api/list-item-secondary-action.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item-secondary-action', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item-text.js b/docs/pages/material-ui/api/list-item-text.js index 3088bcd762f13b..fa7113048dfb14 100644 --- a/docs/pages/material-ui/api/list-item-text.js +++ b/docs/pages/material-ui/api/list-item-text.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item-text', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-item.js b/docs/pages/material-ui/api/list-item.js index b2ee97b906cf79..bf43c35aac67a9 100644 --- a/docs/pages/material-ui/api/list-item.js +++ b/docs/pages/material-ui/api/list-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list-subheader.js b/docs/pages/material-ui/api/list-subheader.js index df8673c2c8bc89..ddb9ec599a70c3 100644 --- a/docs/pages/material-ui/api/list-subheader.js +++ b/docs/pages/material-ui/api/list-subheader.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/list-subheader', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/list.js b/docs/pages/material-ui/api/list.js index 6e86f49cb95db4..4e0caba84f9d92 100644 --- a/docs/pages/material-ui/api/list.js +++ b/docs/pages/material-ui/api/list.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/list', false, /\.\/list.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/masonry.js b/docs/pages/material-ui/api/masonry.js index 88aa9c6cbd15e8..21b4d7c8a7fcde 100644 --- a/docs/pages/material-ui/api/masonry.js +++ b/docs/pages/material-ui/api/masonry.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/masonry', false, /\.\/masonry.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/menu-item.js b/docs/pages/material-ui/api/menu-item.js index 408feeacd0cf5f..cbc33f2c9614d0 100644 --- a/docs/pages/material-ui/api/menu-item.js +++ b/docs/pages/material-ui/api/menu-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/menu-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/menu-list.js b/docs/pages/material-ui/api/menu-list.js index bd86cfba032053..f8cbe5d907400e 100644 --- a/docs/pages/material-ui/api/menu-list.js +++ b/docs/pages/material-ui/api/menu-list.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/menu-list', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/menu.js b/docs/pages/material-ui/api/menu.js index cde0ff43839724..58b80fc88dd582 100644 --- a/docs/pages/material-ui/api/menu.js +++ b/docs/pages/material-ui/api/menu.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/menu', false, /\.\/menu.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/mobile-stepper.js b/docs/pages/material-ui/api/mobile-stepper.js index c5179204b5e108..ca44fc2f4a8a67 100644 --- a/docs/pages/material-ui/api/mobile-stepper.js +++ b/docs/pages/material-ui/api/mobile-stepper.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/mobile-stepper', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/modal.js b/docs/pages/material-ui/api/modal.js index 0289a7900feb48..41eac324e0b705 100644 --- a/docs/pages/material-ui/api/modal.js +++ b/docs/pages/material-ui/api/modal.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/modal', false, /\.\/modal.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/native-select.js b/docs/pages/material-ui/api/native-select.js index 25999ca3a99a65..cb76c66df3ee37 100644 --- a/docs/pages/material-ui/api/native-select.js +++ b/docs/pages/material-ui/api/native-select.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/native-select', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/no-ssr.js b/docs/pages/material-ui/api/no-ssr.js index 03c084bbcf6a12..84dafaadf05d77 100644 --- a/docs/pages/material-ui/api/no-ssr.js +++ b/docs/pages/material-ui/api/no-ssr.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/no-ssr', false, /\.\/no-ssr.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/outlined-input.js b/docs/pages/material-ui/api/outlined-input.js index 823e33c8dfb232..a149776fa14b20 100644 --- a/docs/pages/material-ui/api/outlined-input.js +++ b/docs/pages/material-ui/api/outlined-input.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/outlined-input', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/pagination-item.js b/docs/pages/material-ui/api/pagination-item.js index b5b40fe4228cd3..74c4872b6a7bd2 100644 --- a/docs/pages/material-ui/api/pagination-item.js +++ b/docs/pages/material-ui/api/pagination-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/pagination-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/pagination.js b/docs/pages/material-ui/api/pagination.js index a2c779fc9dd9c4..cc3985e2aea371 100644 --- a/docs/pages/material-ui/api/pagination.js +++ b/docs/pages/material-ui/api/pagination.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/pagination', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/paper.js b/docs/pages/material-ui/api/paper.js index 9abf6097e6e6bb..1d71a3ed3ccb4b 100644 --- a/docs/pages/material-ui/api/paper.js +++ b/docs/pages/material-ui/api/paper.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/paper', false, /\.\/paper.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/pigment-container.js b/docs/pages/material-ui/api/pigment-container.js index aefeab0eb60f9f..4a558501e5a211 100644 --- a/docs/pages/material-ui/api/pigment-container.js +++ b/docs/pages/material-ui/api/pigment-container.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/pigment-container', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/pigment-grid.js b/docs/pages/material-ui/api/pigment-grid.js index 2bffa857c20998..29416584acd95b 100644 --- a/docs/pages/material-ui/api/pigment-grid.js +++ b/docs/pages/material-ui/api/pigment-grid.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/pigment-grid', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/pigment-stack.js b/docs/pages/material-ui/api/pigment-stack.js index 47d4892cfa198d..f59e6db70c516e 100644 --- a/docs/pages/material-ui/api/pigment-stack.js +++ b/docs/pages/material-ui/api/pigment-stack.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/pigment-stack', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/popover.js b/docs/pages/material-ui/api/popover.js index 65e3ca1b8ac693..955b18c3a918fa 100644 --- a/docs/pages/material-ui/api/popover.js +++ b/docs/pages/material-ui/api/popover.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/popover', false, /\.\/popover.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/popper.js b/docs/pages/material-ui/api/popper.js index 7c17e56eb1e9d2..0de428b7c6c173 100644 --- a/docs/pages/material-ui/api/popper.js +++ b/docs/pages/material-ui/api/popper.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/popper', false, /\.\/popper.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/portal.js b/docs/pages/material-ui/api/portal.js index e53de2d6983e86..73d09632258a91 100644 --- a/docs/pages/material-ui/api/portal.js +++ b/docs/pages/material-ui/api/portal.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/portal', false, /\.\/portal.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/radio-group.js b/docs/pages/material-ui/api/radio-group.js index 48e679cf801a02..c964232998957d 100644 --- a/docs/pages/material-ui/api/radio-group.js +++ b/docs/pages/material-ui/api/radio-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/radio-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/radio.js b/docs/pages/material-ui/api/radio.js index e8157153213760..f30b51b3c0750e 100644 --- a/docs/pages/material-ui/api/radio.js +++ b/docs/pages/material-ui/api/radio.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/radio', false, /\.\/radio.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/rating.js b/docs/pages/material-ui/api/rating.js index c2dafdaf72b9ad..a28bd63c625c83 100644 --- a/docs/pages/material-ui/api/rating.js +++ b/docs/pages/material-ui/api/rating.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/rating', false, /\.\/rating.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/scoped-css-baseline.js b/docs/pages/material-ui/api/scoped-css-baseline.js index b8e4bde42c8210..68c988fe66c3ff 100644 --- a/docs/pages/material-ui/api/scoped-css-baseline.js +++ b/docs/pages/material-ui/api/scoped-css-baseline.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/scoped-css-baseline', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/select.js b/docs/pages/material-ui/api/select.js index 13691fa6c2e8db..39f6f2f83f9116 100644 --- a/docs/pages/material-ui/api/select.js +++ b/docs/pages/material-ui/api/select.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/select', false, /\.\/select.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/skeleton.js b/docs/pages/material-ui/api/skeleton.js index f092dc21ec75d7..07b0a7ab76ad5c 100644 --- a/docs/pages/material-ui/api/skeleton.js +++ b/docs/pages/material-ui/api/skeleton.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/skeleton', false, /\.\/skeleton.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/slide.js b/docs/pages/material-ui/api/slide.js index 9d6f3eb24153ab..65908ea7c844be 100644 --- a/docs/pages/material-ui/api/slide.js +++ b/docs/pages/material-ui/api/slide.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/slide', false, /\.\/slide.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/slider.js b/docs/pages/material-ui/api/slider.js index 623fba7265ed44..1c9be919794b48 100644 --- a/docs/pages/material-ui/api/slider.js +++ b/docs/pages/material-ui/api/slider.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/slider', false, /\.\/slider.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/snackbar-content.js b/docs/pages/material-ui/api/snackbar-content.js index ce230e77f06a16..e66249b2ba6787 100644 --- a/docs/pages/material-ui/api/snackbar-content.js +++ b/docs/pages/material-ui/api/snackbar-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/snackbar-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/snackbar.js b/docs/pages/material-ui/api/snackbar.js index 9654372f4bef68..b697d9a7dd51c7 100644 --- a/docs/pages/material-ui/api/snackbar.js +++ b/docs/pages/material-ui/api/snackbar.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/snackbar', false, /\.\/snackbar.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/speed-dial-action.js b/docs/pages/material-ui/api/speed-dial-action.js index 9527cbb8accaef..d4358efc6c93b9 100644 --- a/docs/pages/material-ui/api/speed-dial-action.js +++ b/docs/pages/material-ui/api/speed-dial-action.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/speed-dial-action', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/speed-dial-icon.js b/docs/pages/material-ui/api/speed-dial-icon.js index 95bbf71c602191..f66d4132787a61 100644 --- a/docs/pages/material-ui/api/speed-dial-icon.js +++ b/docs/pages/material-ui/api/speed-dial-icon.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/speed-dial-icon', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/speed-dial.js b/docs/pages/material-ui/api/speed-dial.js index b65229e638ed18..73902e368f22db 100644 --- a/docs/pages/material-ui/api/speed-dial.js +++ b/docs/pages/material-ui/api/speed-dial.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/speed-dial', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/stack.js b/docs/pages/material-ui/api/stack.js index 0aa54fe96304e0..f3c0ef33f0b530 100644 --- a/docs/pages/material-ui/api/stack.js +++ b/docs/pages/material-ui/api/stack.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/stack', false, /\.\/stack.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step-button.js b/docs/pages/material-ui/api/step-button.js index eb7ca453f6e423..4b69f903b84772 100644 --- a/docs/pages/material-ui/api/step-button.js +++ b/docs/pages/material-ui/api/step-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/step-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step-connector.js b/docs/pages/material-ui/api/step-connector.js index d2b6904e580374..e0dc81296cff25 100644 --- a/docs/pages/material-ui/api/step-connector.js +++ b/docs/pages/material-ui/api/step-connector.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/step-connector', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step-content.js b/docs/pages/material-ui/api/step-content.js index 7771265ddb4326..64638adedc99f6 100644 --- a/docs/pages/material-ui/api/step-content.js +++ b/docs/pages/material-ui/api/step-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/step-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step-icon.js b/docs/pages/material-ui/api/step-icon.js index 5ab5c473fb0725..c48d7d5afafef8 100644 --- a/docs/pages/material-ui/api/step-icon.js +++ b/docs/pages/material-ui/api/step-icon.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/step-icon', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step-label.js b/docs/pages/material-ui/api/step-label.js index 808f6e72fae203..c98030830afaa8 100644 --- a/docs/pages/material-ui/api/step-label.js +++ b/docs/pages/material-ui/api/step-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/step-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/step.js b/docs/pages/material-ui/api/step.js index aea91ceb86df6e..47eeb8a3fa89e3 100644 --- a/docs/pages/material-ui/api/step.js +++ b/docs/pages/material-ui/api/step.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/step', false, /\.\/step.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/stepper.js b/docs/pages/material-ui/api/stepper.js index e440aca7a04e11..10d100fabd533f 100644 --- a/docs/pages/material-ui/api/stepper.js +++ b/docs/pages/material-ui/api/stepper.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/stepper', false, /\.\/stepper.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/svg-icon.js b/docs/pages/material-ui/api/svg-icon.js index 837ae3a971c96c..a07f66eadaf4dd 100644 --- a/docs/pages/material-ui/api/svg-icon.js +++ b/docs/pages/material-ui/api/svg-icon.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/svg-icon', false, /\.\/svg-icon.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/swipeable-drawer.js b/docs/pages/material-ui/api/swipeable-drawer.js index 05025876692483..60d03bcf8df7ec 100644 --- a/docs/pages/material-ui/api/swipeable-drawer.js +++ b/docs/pages/material-ui/api/swipeable-drawer.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/swipeable-drawer', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/switch.js b/docs/pages/material-ui/api/switch.js index fd40f75f9067a1..cf7ff7f728c833 100644 --- a/docs/pages/material-ui/api/switch.js +++ b/docs/pages/material-ui/api/switch.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/switch', false, /\.\/switch.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tab-context.js b/docs/pages/material-ui/api/tab-context.js index 5b8a7313c89c4b..659b0a02e93dec 100644 --- a/docs/pages/material-ui/api/tab-context.js +++ b/docs/pages/material-ui/api/tab-context.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/tab-context', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tab-list.js b/docs/pages/material-ui/api/tab-list.js index aee0b773f572d6..c5e72f7747e710 100644 --- a/docs/pages/material-ui/api/tab-list.js +++ b/docs/pages/material-ui/api/tab-list.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/tab-list', false, /\.\/tab-list.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tab-panel.js b/docs/pages/material-ui/api/tab-panel.js index 9804020cb8b4b5..50bac668f00338 100644 --- a/docs/pages/material-ui/api/tab-panel.js +++ b/docs/pages/material-ui/api/tab-panel.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/tab-panel', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tab-scroll-button.js b/docs/pages/material-ui/api/tab-scroll-button.js index 8270de8dd37faa..1361a198552636 100644 --- a/docs/pages/material-ui/api/tab-scroll-button.js +++ b/docs/pages/material-ui/api/tab-scroll-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/tab-scroll-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tab.js b/docs/pages/material-ui/api/tab.js index 60c10405d50cda..2f33110a29fd48 100644 --- a/docs/pages/material-ui/api/tab.js +++ b/docs/pages/material-ui/api/tab.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/tab', false, /\.\/tab.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-body.js b/docs/pages/material-ui/api/table-body.js index c1520d8efb66d9..35ac69502b7926 100644 --- a/docs/pages/material-ui/api/table-body.js +++ b/docs/pages/material-ui/api/table-body.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-body', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-cell.js b/docs/pages/material-ui/api/table-cell.js index 2241984f35740f..ff316877e5db33 100644 --- a/docs/pages/material-ui/api/table-cell.js +++ b/docs/pages/material-ui/api/table-cell.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-cell', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-container.js b/docs/pages/material-ui/api/table-container.js index 0ee6a230877611..a4ad338e52bf3c 100644 --- a/docs/pages/material-ui/api/table-container.js +++ b/docs/pages/material-ui/api/table-container.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-container', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-footer.js b/docs/pages/material-ui/api/table-footer.js index e7b0059f05657c..f140cf7b37a80e 100644 --- a/docs/pages/material-ui/api/table-footer.js +++ b/docs/pages/material-ui/api/table-footer.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-footer', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-head.js b/docs/pages/material-ui/api/table-head.js index b2a093710f0cde..956384c485ebe8 100644 --- a/docs/pages/material-ui/api/table-head.js +++ b/docs/pages/material-ui/api/table-head.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-head', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-pagination.js b/docs/pages/material-ui/api/table-pagination.js index 4bbfab99da478f..db9bbf82c7c17e 100644 --- a/docs/pages/material-ui/api/table-pagination.js +++ b/docs/pages/material-ui/api/table-pagination.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-pagination', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-row.js b/docs/pages/material-ui/api/table-row.js index 56b840dbaf1481..7ce3418b5525ee 100644 --- a/docs/pages/material-ui/api/table-row.js +++ b/docs/pages/material-ui/api/table-row.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-row', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table-sort-label.js b/docs/pages/material-ui/api/table-sort-label.js index b6fab15c9dac10..6e860b6c4b14a8 100644 --- a/docs/pages/material-ui/api/table-sort-label.js +++ b/docs/pages/material-ui/api/table-sort-label.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/table-sort-label', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/table.js b/docs/pages/material-ui/api/table.js index 7dcf206732148f..7e5bee9654bca2 100644 --- a/docs/pages/material-ui/api/table.js +++ b/docs/pages/material-ui/api/table.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/table', false, /\.\/table.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tabs.js b/docs/pages/material-ui/api/tabs.js index fd3323b67a628f..61886c2cdea833 100644 --- a/docs/pages/material-ui/api/tabs.js +++ b/docs/pages/material-ui/api/tabs.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/tabs', false, /\.\/tabs.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/text-field.js b/docs/pages/material-ui/api/text-field.js index 86384a6ca4cc50..ba79dcc93861cd 100644 --- a/docs/pages/material-ui/api/text-field.js +++ b/docs/pages/material-ui/api/text-field.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/text-field', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/textarea-autosize.js b/docs/pages/material-ui/api/textarea-autosize.js index 4a8184ae71999b..a1a950488804d5 100644 --- a/docs/pages/material-ui/api/textarea-autosize.js +++ b/docs/pages/material-ui/api/textarea-autosize.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/textarea-autosize', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-connector.js b/docs/pages/material-ui/api/timeline-connector.js index 428972247c1860..5e91358782c163 100644 --- a/docs/pages/material-ui/api/timeline-connector.js +++ b/docs/pages/material-ui/api/timeline-connector.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-connector', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-content.js b/docs/pages/material-ui/api/timeline-content.js index 4bf383a50a1cce..fb62a86331d882 100644 --- a/docs/pages/material-ui/api/timeline-content.js +++ b/docs/pages/material-ui/api/timeline-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-dot.js b/docs/pages/material-ui/api/timeline-dot.js index 1c4efe2cbeb774..0396075858266e 100644 --- a/docs/pages/material-ui/api/timeline-dot.js +++ b/docs/pages/material-ui/api/timeline-dot.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-dot', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-item.js b/docs/pages/material-ui/api/timeline-item.js index 5bb82d995dc184..e1caf83bb2f0f9 100644 --- a/docs/pages/material-ui/api/timeline-item.js +++ b/docs/pages/material-ui/api/timeline-item.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-item', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-opposite-content.js b/docs/pages/material-ui/api/timeline-opposite-content.js index 729b180a2b4857..75fc01637f1b7b 100644 --- a/docs/pages/material-ui/api/timeline-opposite-content.js +++ b/docs/pages/material-ui/api/timeline-opposite-content.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-opposite-content', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline-separator.js b/docs/pages/material-ui/api/timeline-separator.js index c9acabb04fdf3b..b5ba1506ff6ff7 100644 --- a/docs/pages/material-ui/api/timeline-separator.js +++ b/docs/pages/material-ui/api/timeline-separator.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/timeline-separator', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/timeline.js b/docs/pages/material-ui/api/timeline.js index a18e06a980f95b..a868548f384194 100644 --- a/docs/pages/material-ui/api/timeline.js +++ b/docs/pages/material-ui/api/timeline.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/timeline', false, /\.\/timeline.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/toggle-button-group.js b/docs/pages/material-ui/api/toggle-button-group.js index 216a14a348147b..cf3bcadc1249a3 100644 --- a/docs/pages/material-ui/api/toggle-button-group.js +++ b/docs/pages/material-ui/api/toggle-button-group.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/toggle-button-group', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/toggle-button.js b/docs/pages/material-ui/api/toggle-button.js index efc14eba5bb525..a7e7ad8df257a3 100644 --- a/docs/pages/material-ui/api/toggle-button.js +++ b/docs/pages/material-ui/api/toggle-button.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/toggle-button', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/toolbar.js b/docs/pages/material-ui/api/toolbar.js index 7913d980dcb64c..e46a8d5e9cc4d7 100644 --- a/docs/pages/material-ui/api/toolbar.js +++ b/docs/pages/material-ui/api/toolbar.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/toolbar', false, /\.\/toolbar.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/tooltip.js b/docs/pages/material-ui/api/tooltip.js index ed5791b04d72fc..9c6b76fb478688 100644 --- a/docs/pages/material-ui/api/tooltip.js +++ b/docs/pages/material-ui/api/tooltip.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/tooltip', false, /\.\/tooltip.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/typography.js b/docs/pages/material-ui/api/typography.js index 368ee85523089a..1a253ccca205f3 100644 --- a/docs/pages/material-ui/api/typography.js +++ b/docs/pages/material-ui/api/typography.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/typography', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/material-ui/api/zoom.js b/docs/pages/material-ui/api/zoom.js index 781f9eceadbebf..62783fe83df53c 100644 --- a/docs/pages/material-ui/api/zoom.js +++ b/docs/pages/material-ui/api/zoom.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/zoom', false, /\.\/zoom.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/system/api/box.js b/docs/pages/system/api/box.js index 476c932ffc5819..ba3a20bc5821a4 100644 --- a/docs/pages/system/api/box.js +++ b/docs/pages/system/api/box.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/box', false, /\.\/box.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/system/api/container.js b/docs/pages/system/api/container.js index bb6b55f6601af5..090f1ad28f992f 100644 --- a/docs/pages/system/api/container.js +++ b/docs/pages/system/api/container.js @@ -8,7 +8,7 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context( 'docs/translations/api-docs/container', false, @@ -17,7 +17,9 @@ Page.getInitialProps = () => { const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/system/api/grid.js b/docs/pages/system/api/grid.js index b365259b168867..1660a4d5487753 100644 --- a/docs/pages/system/api/grid.js +++ b/docs/pages/system/api/grid.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/grid', false, /\.\/grid.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/pages/system/api/stack.js b/docs/pages/system/api/stack.js index 0aa54fe96304e0..f3c0ef33f0b530 100644 --- a/docs/pages/system/api/stack.js +++ b/docs/pages/system/api/stack.js @@ -8,12 +8,14 @@ export default function Page(props) { return ; } -Page.getInitialProps = () => { +export async function getStaticProps() { const req = require.context('docs/translations/api-docs/stack', false, /\.\/stack.*.json$/); const descriptions = mapApiPageTranslations(req); return { - descriptions, - pageContent: jsonPageContent, + props: { + descriptions, + pageContent: jsonPageContent, + }, }; -}; +} diff --git a/docs/public/material-ui/all-components.md b/docs/public/material-ui/all-components.md new file mode 100644 index 00000000000000..5d5b9699555cdf --- /dev/null +++ b/docs/public/material-ui/all-components.md @@ -0,0 +1,22 @@ +# Material UI components + +Every Material UI component available so far. + +Material UI aims to provide building blocks for developers to create great user interfaces using the Material Design guidelines as a reference, which we strive to follow where practical. +The library doesn't necessarily implement the exact specs of every component or feature—where official guidelines are incomplete or contradictory, maintainers apply common sense along with the latest standards in web development. + +## Inputs + +## Data display + +## Feedback + +## Surface + +## Navigation + +## Layout + +## Lab + +## Utils diff --git a/docs/public/material-ui/customization/breakpoints.md b/docs/public/material-ui/customization/breakpoints.md new file mode 100644 index 00000000000000..ab82b011b9e931 --- /dev/null +++ b/docs/public/material-ui/customization/breakpoints.md @@ -0,0 +1,299 @@ +# Breakpoints + +API that enables the use of breakpoints in a wide variety of contexts. + +For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints. +Material UI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). + +The breakpoints are used internally in various components to make them responsive, +but you can also take advantage of them +for controlling the layout of your application through the [Grid](/material-ui/react-grid/) component. + +## Default breakpoints + +Each breakpoint (a key) matches with a _fixed_ screen width (a value): + + + +- **xs,** extra-small: 0px +- **sm,** small: 600px +- **md,** medium: 900px +- **lg,** large: 1200px +- **xl,** extra-large: 1536px + +These values can be [customized](#custom-breakpoints). + +## CSS Media Queries + +CSS media queries are the idiomatic approach to make your UI responsive. +The theme provides five styles helpers to do so: + +- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query) +- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query) +- [theme.breakpoints.only(key)](#theme-breakpoints-only-key-media-query) +- [theme.breakpoints.not(key)](#theme-breakpoints-not-key-media-query) +- [theme.breakpoints.between(start, end)](#theme-breakpoints-between-start-end-media-query) + +In the following demo, we change the background color (red, blue & green) based on the screen width. + +```jsx +const styles = (theme) => ({ + root: { + padding: theme.spacing(1), + [theme.breakpoints.down('md')]: { + backgroundColor: theme.palette.secondary.main, + }, + [theme.breakpoints.up('md')]: { + backgroundColor: theme.palette.primary.main, + }, + [theme.breakpoints.up('lg')]: { + backgroundColor: green[500], + }, + }, +}); +``` + +```tsx +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import { red, green, blue } from '@mui/material/colors'; + +const Root = styled('div')(({ theme }) => ({ + padding: theme.spacing(1), + [theme.breakpoints.down('md')]: { + backgroundColor: red[500], + }, + [theme.breakpoints.up('md')]: { + backgroundColor: blue[500], + }, + [theme.breakpoints.up('lg')]: { + backgroundColor: green[500], + }, +})); + +export default function MediaQuery() { + return ( + + down(md): red + up(md): blue + up(lg): green + + ); +} +``` + +## JavaScript Media Queries + +Sometimes, using CSS isn't enough. +You might want to change the React rendering tree based on the breakpoint value, in JavaScript. + +### useMediaQuery hook + +You can learn more on the [useMediaQuery](/material-ui/react-use-media-query/) page. + +## Custom breakpoints + +You define your project's breakpoints in the `theme.breakpoints` section of your theme. + + + +- [`theme.breakpoints.values`](/material-ui/customization/default-theme/?expand-path=$.breakpoints.values): Default to the [above values](#default-breakpoints). The keys are your screen names, and the values are the min-width where that breakpoint should start. +- `theme.breakpoints.unit`: Default to `'px'`. The unit used for the breakpoint's values. +- `theme.breakpoints.step`: Default to `5`. The increment divided by 100 used to implement exclusive breakpoints. + For example, `{ step: 5 }` means that `down(500)` will result in `'(max-width: 499.95px)'`. + +If you change the default breakpoints's values, you need to provide them all: + +```jsx +const theme = createTheme({ + breakpoints: { + values: { + xs: 0, + sm: 600, + md: 900, + lg: 1200, + xl: 1536, + }, + }, +}); +``` + +Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. + +```js +const theme = createTheme({ + breakpoints: { + values: { + mobile: 0, + tablet: 640, + laptop: 1024, + desktop: 1200, + }, + }, +}); +``` + +If you are using TypeScript, you would also need to use [module augmentation](/material-ui/guides/typescript/#customization-of-theme) for the theme to accept the above values. + + + +```ts +declare module '@mui/material/styles' { + interface BreakpointOverrides { + xs: false; // removes the `xs` breakpoint + sm: false; + md: false; + lg: false; + xl: false; + mobile: true; // adds the `mobile` breakpoint + tablet: true; + laptop: true; + desktop: true; + } +} +``` + +## API + +### `theme.breakpoints.up(key) => media query` + + + +#### Arguments + +1. `key` (_string_ | _number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. + +#### Returns + +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive). + +#### Examples + +```js +const styles = (theme) => ({ + root: { + backgroundColor: 'blue', + // Match [md, ∞) + // [900px, ∞) + [theme.breakpoints.up('md')]: { + backgroundColor: 'red', + }, + }, +}); +``` + +### `theme.breakpoints.down(key) => media query` + + + +#### Arguments + +1. `key` (_string_ | _number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. + +#### Returns + +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive). + +#### Examples + +```js +const styles = (theme) => ({ + root: { + backgroundColor: 'blue', + // Match [0, md) + // [0, 900px) + [theme.breakpoints.down('md')]: { + backgroundColor: 'red', + }, + }, +}); +``` + +### `theme.breakpoints.only(key) => media query` + + + +#### Arguments + +1. `key` (_string_): A breakpoint key (`xs`, `sm`, etc.). + +#### Returns + +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths starting from the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive). + +#### Examples + +```js +const styles = (theme) => ({ + root: { + backgroundColor: 'blue', + // Match [md, md + 1) + // [md, lg) + // [900px, 1200px) + [theme.breakpoints.only('md')]: { + backgroundColor: 'red', + }, + }, +}); +``` + +### `theme.breakpoints.not(key) => media query` + + + +#### Arguments + +1. `key` (_string_): A breakpoint key (`xs`, `sm`, etc.). + +#### Returns + +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths stopping at the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive). + +#### Examples + +```js +const styles = (theme) => ({ + root: { + backgroundColor: 'blue', + // Match [xs, md) and [md + 1, ∞) + // [xs, md) and [lg, ∞) + // [0px, 900px) and [1200px, ∞) + [theme.breakpoints.not('md')]: { + backgroundColor: 'red', + }, + }, +}); +``` + +### `theme.breakpoints.between(start, end) => media query` + + + +#### Arguments + +1. `start` (_string_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. +2. `end` (_string_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. + +#### Returns + +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive). + +#### Examples + +```js +const styles = (theme) => ({ + root: { + backgroundColor: 'blue', + // Match [sm, md) + // [600px, 900px) + [theme.breakpoints.between('sm', 'md')]: { + backgroundColor: 'red', + }, + }, +}); +``` + +## Default values + +You can explore the default values of the breakpoints using [the theme explorer](/material-ui/customization/default-theme/?expand-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`). diff --git a/docs/public/material-ui/customization/color.md b/docs/public/material-ui/customization/color.md new file mode 100644 index 00000000000000..c6110810a699c1 --- /dev/null +++ b/docs/public/material-ui/customization/color.md @@ -0,0 +1,572 @@ +# Color + +Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines. + +The Material Design [color system](https://m2.material.io/design/color/) can be used to create a color theme that reflects your brand or style. + +## Picking colors + +### Official color tool + +The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://m2.material.io/inline-tools/color/). +This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination. + + + Official color tool + +
+
+ +The output can be fed into `createTheme()` function: + +```js +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + palette: { + primary: { + light: '#757ce8', + main: '#3f50b5', + dark: '#002884', + contrastText: '#fff', + }, + secondary: { + light: '#ff7961', + main: '#f44336', + dark: '#ba000d', + contrastText: '#000', + }, + }, +}); +``` + +### Playground + +To test a [material.io/design/color](https://m2.material.io/design/color/) color scheme with the Material UI documentation, simply select colors using the palette and sliders below. +Alternatively, you can enter hex values in the Primary and Secondary text fields. + +```jsx +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { rgbToHex, useTheme } from '@mui/material/styles'; +import * as colors from '@mui/material/colors'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import Input from '@mui/material/Input'; +import Radio from '@mui/material/Radio'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import CheckIcon from '@mui/icons-material/Check'; +import Slider from '@mui/material/Slider'; +import { capitalize } from '@mui/material/utils'; +import { resetDocsColor, setDocsColors } from 'docs/src/BrandingCssVarsProvider'; +import ColorDemo from './ColorDemo'; + +const defaults = { + primary: '#2196f3', + secondary: '#f50057', +}; +const hues = [ + 'red', + 'pink', + 'purple', + 'deepPurple', + 'indigo', + 'blue', + 'lightBlue', + 'cyan', + 'teal', + 'green', + 'lightGreen', + 'lime', + 'yellow', + 'amber', + 'orange', + 'deepOrange', +]; + +const shades = [ + 900, + 800, + 700, + 600, + 500, + 400, + 300, + 200, + 100, + 50, + 'A700', + 'A400', + 'A200', + 'A100', +]; + +const TooltipRadio = React.forwardRef(function TooltipRadio(props, ref) { + const { + 'aria-labelledby': ariaLabelledBy, + 'aria-label': ariaLabel, + inputProps, + ...other + } = props; + + return ( + + ); +}); + +TooltipRadio.propTypes = { + // possibly opaque identifier + 'aria-label': PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + 'aria-labelledby': PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + inputProps: PropTypes.object, +}; + +function ColorTool() { + const theme = useTheme(); + const [state, setState] = React.useState({ + primary: defaults.primary, + secondary: defaults.secondary, + primaryInput: defaults.primary, + secondaryInput: defaults.secondary, + primaryHue: 'blue', + secondaryHue: 'pink', + primaryShade: 4, + secondaryShade: 11, + }); + + const handleChangeColor = (name) => (event) => { + const isRgb = (string) => + /rgb\([0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\)/i.test(string); + + const isHex = (string) => /^#?([0-9a-f]{3})$|^#?([0-9a-f]){6}$/i.test(string); + + let { + target: { value: color }, + } = event; + + setState((prevState) => ({ + ...prevState, + [`${name}Input`]: color, + })); + + let isValidColor = false; + + if (isRgb(color)) { + isValidColor = true; + } else if (isHex(color)) { + isValidColor = true; + if (!color.includes('#')) { + color = `#${color}`; + } + } + + if (isValidColor) { + setState((prevState) => ({ + ...prevState, + [name]: color, + })); + } + }; + + const handleChangeHue = (name) => (event) => { + const hue = event.target.value; + const color = colors[hue][shades[state[`${name}Shade`]]]; + + setState({ + ...state, + [`${name}Hue`]: hue, + [name]: color, + [`${name}Input`]: color, + }); + }; + + const handleChangeShade = (name) => (event, shade) => { + const color = colors[state[`${name}Hue`]][shades[shade]]; + setState({ + ...state, + [`${name}Shade`]: shade, + [name]: color, + [`${name}Input`]: color, + }); + }; + + const handleChangeDocsColors = () => { + const paletteColors = { + primary: { ...colors[state.primaryHue], main: state.primary }, + secondary: { ...colors[state.secondaryHue], main: state.secondary }, + }; + + setDocsColors(paletteColors.primary, paletteColors.secondary); + + document.cookie = `paletteColors=${JSON.stringify( + paletteColors, + )};path=/;max-age=31536000`; + }; + + const handleResetDocsColors = () => { + resetDocsColor(); + + document.cookie = 'paletteColors=;path=/;max-age=0'; + }; + + const colorBar = (color) => { + const background = theme.palette.augmentColor({ + color: { + main: color, + }, + }); + + return ( + + {['dark', 'main', 'light'].map((key) => ( + + + {rgbToHex(background[key])} + + + ))} + + ); + }; + + const colorPicker = (intent) => { + const intentInput = state[`${intent}Input`]; + const intentShade = state[`${intent}Shade`]; + const color = state[`${intent}`]; + + return ( + + + {capitalize(intent)} + + + + Shade: + + {shades[intentShade]} + + + {hues.map((hue) => { + const shade = + intent === 'primary' + ? shades[state.primaryShade] + : shades[state.secondaryShade]; + const backgroundColor = colors[hue][shade]; + + return ( + + + } + checkedIcon={ + + + + } + /> + + ); + })} + + {colorBar(color)} + + ); + }; + + return ( + + {colorPicker('primary')} + {colorPicker('secondary')} + + + + + + + + + ); +} + +export default ColorTool; +``` + +The output shown in the color sample can be pasted directly into a [`createTheme()`](/material-ui/customization/theming/#createtheme-options-args-theme) function (to be used with [`ThemeProvider`](/material-ui/customization/theming/#theme-provider)): + +```jsx +import { createTheme } from '@mui/material/styles'; +import { purple } from '@mui/material/colors'; + +const theme = createTheme({ + palette: { + primary: { + main: purple[500], + }, + secondary: { + main: '#f44336', + }, + }, +}); +``` + +Only the `main` shades need to be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createTheme()`, as described in the [Theme customization](/material-ui/customization/palette/) section. + +If you are using the default primary and / or secondary shades then by providing the color object, `createTheme()` will use the appropriate shades from the material color for main, light and dark. + +### Tools by the community + +- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme +- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. + +## 2014 Material Design color palettes + +These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool. + +### Important Terms + +- **Palette**: A palette is a collection of colors, that is hues and their shades. Material UI provides all colors from the Material Design guidelines. + [This color palette](#color-palette) has been designed with colors that work harmoniously with each other. +- **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". + "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest. + In addition, most hues come with "accent" shades, prefixed with an `A`. + +### Color palette + +Given a _HUE_ (red, pink, etc.) and a _SHADE_ (500, 600, etc.) you can import the color like this: + +```jsx +import { red } from '@mui/material/colors'; + +const color = red[500]; +``` + +```jsx +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { styled, useTheme } from '@mui/material/styles'; +import * as colors from '@mui/material/colors'; + +const mainColors = [ + 'Red', + 'Pink', + 'Purple', + 'Deep Purple', + 'Indigo', + 'Blue', + 'Light Blue', + 'Cyan', + 'Teal', + 'Green', + 'Light Green', + 'Lime', + 'Yellow', + 'Amber', + 'Orange', + 'Deep Orange', + 'Brown', + 'Grey', + 'Blue Grey', +]; + +const mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; +const altPalette = ['A100', 'A200', 'A400', 'A700']; + +const ColorGroup = styled('ul', { name: 'ColorGroup' })(({ theme }) => ({ + padding: 0, + margin: theme.spacing(0, 2, 2, 0), + flexGrow: 1, + [theme.breakpoints.up('sm')]: { + flexGrow: 0, + width: '30%', + }, +})); + +const ColorValue = styled('span', { name: 'ColorValue' })(({ theme }) => ({ + ...theme.typography.caption, + color: 'inherit', + fontWeight: 'inherit', +})); + +const ColorBlock = styled('li', { name: 'ColorBlock' })( + ({ theme }) => theme.typography.body2, +); + +function getColorBlock(theme, colorName, colorValue, colorTitle) { + const bgColor = colors[colorName][colorValue]; + const fgColor = theme.palette.getContrastText(bgColor); + + let blockTitle; + if (colorTitle) { + blockTitle = {colorName}; + } + + let rowStyle = { + backgroundColor: bgColor, + color: fgColor, + listStyle: 'none', + padding: 15, + }; + + if (colorValue.toString().startsWith('A1')) { + rowStyle = { + ...rowStyle, + marginTop: 4, + }; + } + + return ( + + {blockTitle} + + {colorValue} + {bgColor} + + + ); +} + +function getColorGroup(options) { + const { theme, color, showAltPalette } = options; + const cssColor = color + .replace(' ', '') + .replace(color.charAt(0), color.charAt(0).toLowerCase()); + let colorsList = []; + colorsList = mainPalette.map((mainValue) => + getColorBlock(theme, cssColor, mainValue), + ); + + if (showAltPalette) { + altPalette.forEach((altValue) => { + colorsList.push(getColorBlock(theme, cssColor, altValue)); + }); + } + + return ( + + {getColorBlock(theme, cssColor, 500, true)} + + {colorsList} + + ); +} + +function Color() { + const theme = useTheme(); + + return ( + + {mainColors.map((mainColor) => + getColorGroup({ + theme, + color: mainColor, + showAltPalette: true, + }), + )} + + ); +} + +export default Color; +``` + +### Examples + +For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so: + +```js +import { purple, red } from '@mui/material/colors'; + +const primary = red[500]; // #f44336 +const accent = purple['A200']; // #e040fb +const accent = purple.A200; // #e040fb (alternative method) +``` + +### Accessibility + +[WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) does recommend +that you have a minimum of a 4.5:1 contrast ratio for the visual presentation of text and images of text. +Material UI currently only enforces a 3:1 contrast ratio. If you would like to meet WCAG 2.1 AA compliance, +you can increase your minimum contrast ratio as described in the +[Theme customization](/material-ui/customization/palette/#accessibility) section. diff --git a/docs/public/material-ui/customization/container-queries.md b/docs/public/material-ui/customization/container-queries.md new file mode 100644 index 00000000000000..85b039a363edeb --- /dev/null +++ b/docs/public/material-ui/customization/container-queries.md @@ -0,0 +1,258 @@ +# Container queries + +Material UI provides a utility function for creating CSS container queries based on theme breakpoints. + +## Usage + +To create [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries), use `theme.containerQueries` with any method available in the [`theme.breakpoints`](/material-ui/customization/breakpoints/#api). +The value can be unitless (in which case it'll be rendered in pixels), a string, or a breakpoint key. For example: + +```js +theme.containerQueries.up('sm'); // => '@container (min-width: 600px)' +``` + +```tsx +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; +import Typography from '@mui/material/Typography'; +import ResizableDemo from './ResizableDemo'; + +const DynamicCard = styled(Card)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + [theme.containerQueries.up(350)]: { + flexDirection: 'row', + }, +})); + +const Image = styled('img')(({ theme }) => ({ + alignSelf: 'stretch', + aspectRatio: '16 / 9', + objectFit: 'cover', + width: '100%', + maxHeight: 160, + transition: '0.4s', + [theme.containerQueries.up(350)]: { + maxWidth: '36%', + maxHeight: 'initial', + }, + [theme.containerQueries.up(500)]: { + maxWidth: 240, + }, +})); + +const Content = styled(CardContent)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + padding: theme.spacing(2), + flex: 'auto', + transition: 'padding 0.4s', + [theme.containerQueries.up(500)]: { + padding: theme.spacing(3), + }, +})); + +export default function BasicContainerQueries() { + return ( + + + + The house from the offer. + +
+ + 123 Main St, Phoenix AZ + + + $280,000 — $310,000 + +
+ + + + + + ); +} +``` + +:::info +One of the ancestors must have the CSS container type specified. +::: + +### Named containment contexts + +To refer to a [containment context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts), call the `containerQueries` method with the name of the container for access to all breakpoint methods: + +```js +theme.containerQueries('sidebar').up('500px'); // => '@container sidebar (min-width: 500px)' +``` + +## Shorthand syntax + +When adding styles using the `sx` prop, use the `@` or `@/` notation to apply container queries without referring to the theme. + +- ``: a width or a breakpoint key. +- `` (optional): a named containment context. + +```tsx +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; +import Typography from '@mui/material/Typography'; +import ResizableDemo from './ResizableDemo'; + +export default function SxPropContainerQueries() { + return ( + + + + + +
+ + 123 Main St, Phoenix AZ + + + $280,000 — $310,000 + +
+ + + + + + ); +} +``` + +### Caveats + +- The `@` prefix with a unitless value renders as `px`, so `@500` is equivalent to `500px`—but `@500px` is incorrect syntax and won't render correctly. +- `@` with no number renders as `0px`. +- Container queries must share the same units (the sizes can be defined in any order), as shown below: + + ```js + // ✅ These container queries will be sorted correctly. + padding: { + '@40em': 4, + '@20em': 2, + '@': 0, + } + + // ❌ These container queries won't be sorted correctly + // because 40em is typically greater than 50px + // and the units don't match. + padding: { + '@40em': 4, + '@50': 2, + '@': 0, + } + ``` + +## API + +CSS container queries support all the methods available in [the breakpoints API](/material-ui/customization/breakpoints/#api). + +```js +// For default breakpoints +theme.containerQueries.up('sm'); // => '@container (min-width: 600px)' +theme.containerQueries.down('md'); // => '@container (max-width: 900px)' +theme.containerQueries.only('md'); // => '@container (min-width: 600px) and (max-width: 900px)' +theme.containerQueries.between('sm', 'lg'); // => '@container (min-width: 600px) and (max-width: 1200px)' +theme.containerQueries.not('sm'); // => '@container (max-width: 600px)' +``` diff --git a/docs/public/material-ui/customization/creating-themed-components.md b/docs/public/material-ui/customization/creating-themed-components.md new file mode 100644 index 00000000000000..c6f4b987ed0789 --- /dev/null +++ b/docs/public/material-ui/customization/creating-themed-components.md @@ -0,0 +1,515 @@ +# Creating themed components + +Learn how to create fully custom components that accept your app's theme. + +## Introduction + +Material UI provides a powerful theming feature that lets you add your own components to the theme and treat them as if they're built-in components. + +If you are building a component library on top of Material UI, you can follow the step-by-step guide below to create a custom component that is themeable across multiple projects. + +Alternatively, you can use the provided [template](#template) as a starting point for your component. + +:::info +You don't need to connect your component to the theme if you are only using it in a single project. +::: + +## Step-by-step guide + +This guide will walk you through how to build this statistics component, which accepts the app's theme as though it were a built-in Material UI component: + +```jsx +import * as React from 'react'; +import { styled } from '@mui/material/styles'; + +const StatRoot = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), +})); + +const StatValue = styled('div')(({ theme }) => ({ + ...theme.typography.h3, +})); + +const StatUnit = styled('div')(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + color: 'inherit', + }), +})); + +export default function StatComponent() { + return ( + + 19,267 + Active users / month + + ); +} +``` + +### 1. Create the component slots + +Slots let you customize each individual element of the component by targeting its respective name in the [theme's styleOverrides](/material-ui/customization/theme-components/#theme-style-overrides) and [theme's variants](/material-ui/customization/theme-components/#variants). + +This statistics component is composed of three slots: + +- `root`: the container of the component +- `value`: the number of the statistics +- `unit`: the unit or description of the statistics + +:::success +Though you can give these slots any names you prefer, we recommend using `root` for the outermost container element for consistency with the rest of the library. +::: + +```jsx +import * as React from 'react'; +import { styled } from '@mui/material/styles'; + +const StatRoot = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), +})); + +const StatValue = styled('div')(({ theme }) => ({ + ...theme.typography.h3, +})); + +const StatUnit = styled('div')(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + color: 'inherit', + }), +})); + +const Label = styled('div')(({ theme }) => ({ + borderRadius: '2px', + padding: theme.spacing(0, 1), + color: 'white', + position: 'absolute', + ...theme.typography.body2, + fontSize: '0.75rem', + fontWeight: 500, + backgroundColor: '#ff5252', +})); + +export default function StatSlots() { + return ( + + + 19,267 + + + + Active users / month + + + + + ); +} +``` + +Use the `styled` API with `name` and `slot` parameters to create the slots, as shown below: + +```js +import * as React from 'react'; +import { styled } from '@mui/material/styles'; + +const StatRoot = styled('div', { + name: 'MuiStat', // The component name + slot: 'root', // The slot name +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), +})); + +const StatValue = styled('div', { + name: 'MuiStat', + slot: 'value', +})(({ theme }) => ({ + ...theme.typography.h3, +})); + +const StatUnit = styled('div', { + name: 'MuiStat', + slot: 'unit', +})(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, +})); +``` + +### 2. Create the component + +Assemble the component using the slots created in the previous step: + +```js +// /path/to/Stat.js +import * as React from 'react'; + +const StatRoot = styled('div', { + name: 'MuiStat', + slot: 'root', +})(…); + +const StatValue = styled('div', { + name: 'MuiStat', + slot: 'value', +})(…); + +const StatUnit = styled('div', { + name: 'MuiStat', + slot: 'unit', +})(…); + +const Stat = React.forwardRef(function Stat(props, ref) { + const { value, unit, ...other } = props; + + return ( + + {value} + {unit} + + ); +}); + +export default Stat; +``` + +At this point, you'll be able to apply the theme to the `Stat` component like this: + +```js +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + components: { + // the component name defined in the `name` parameter + // of the `styled` API + MuiStat: { + styleOverrides: { + // the slot name defined in the `slot` and `overridesResolver` parameters + // of the `styled` API + root: { + backgroundColor: '#121212', + }, + value: { + color: '#fff', + }, + unit: { + color: '#888', + }, + }, + }, + }, +}); +``` + +### 3. Style the slot with ownerState + +When you need to style the slot-based props or internal state, wrap them in the `ownerState` object and pass it to each slot as a prop. +The `ownerState` is a special name that will not spread to the DOM via the `styled` API. + +Add a `variant` prop to the `Stat` component and use it to style the `root` slot, as shown below: + +```diff + const Stat = React.forwardRef(function Stat(props, ref) { ++ const { value, unit, variant, ...other } = props; ++ ++ const ownerState = { ...props, variant }; + + return ( +- +- {value} +- {unit} +- ++ ++ {value} ++ {unit} ++ + ); + }); +``` + +Then you can read `ownerState` in the slot to style it based on the `variant` prop. + +```diff + const StatRoot = styled('div', { + name: 'MuiStat', + slot: 'root', +- })(({ theme }) => ({ ++ })(({ theme, ownerState }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), ++ ...ownerState.variant === 'outlined' && { ++ border: `2px solid ${theme.palette.divider}`, ++ }, + })); +``` + +### 4. Support theme default props + +To customize your component's default props for different projects, you need to use the `useThemeProps` API. + +```diff ++ import { useThemeProps } from '@mui/material/styles'; + +- const Stat = React.forwardRef(function Stat(props, ref) { ++ const Stat = React.forwardRef(function Stat(inProps, ref) { ++ const props = useThemeProps({ props: inProps, name: 'MuiStat' }); + const { value, unit, ...other } = props; + + return ( + + {value} + {unit} + + ); + }); +``` + +Then you can customize the default props of your component like this: + +```js +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + components: { + MuiStat: { + defaultProps: { + variant: 'outlined', + }, + }, + }, +}); +``` + +## TypeScript + +If you use TypeScript, you must create interfaces for the component props and ownerState: + +```js +interface StatProps { + value: number | string; + unit: string; + variant?: 'outlined'; +} + +interface StatOwnerState extends StatProps { + // …key value pairs for the internal state that you want to style the slot + // but don't want to expose to the users +} +``` + +Then you can use them in the component and slots. + +```js +const StatRoot = styled('div', { + name: 'MuiStat', + slot: 'root', +})<{ ownerState: StatOwnerState }>(({ theme, ownerState }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), + // typed-safe access to the `variant` prop + ...(ownerState.variant === 'outlined' && { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }), +})); + +// …do the same for other slots + +const Stat = React.forwardRef(function Stat(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiStat' }); + const { value, unit, variant, ...other } = props; + + const ownerState = { ...props, variant }; + + return ( + + {value} + {unit} + + ); +}); +``` + +Finally, add the Stat component to the theme types. + +```ts +import { + ComponentsOverrides, + ComponentsVariants, + Theme as MuiTheme, +} from '@mui/material/styles'; +import { StatProps } from 'path/to/Stat'; + +type Theme = Omit; + +declare module '@mui/material/styles' { + interface ComponentNameToClassKey { + MuiStat: 'root' | 'value' | 'unit'; + } + + interface ComponentsPropsList { + MuiStat: Partial; + } + + interface Components { + MuiStat?: { + defaultProps?: ComponentsPropsList['MuiStat']; + styleOverrides?: ComponentsOverrides['MuiStat']; + variants?: ComponentsVariants['MuiStat']; + }; + } +} +``` + +--- + +## Template + +This template is the final product of the step-by-step guide above, demonstrating how to build a custom component that can be styled with the theme as if it was a built-in component. + +```tsx +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { styled, useThemeProps } from '@mui/material/styles'; + +export interface StatProps { + value: number | string; + unit: string; + variant?: 'outlined'; +} + +interface StatOwnerState extends StatProps { + // …key value pairs for the internal state that you want to style the slot + // but don't want to expose to the users +} + +const StatRoot = styled('div', { + name: 'MuiStat', + slot: 'root', +})<{ ownerState: StatOwnerState }>(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), + padding: theme.spacing(3, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shadows[2], + letterSpacing: '-0.025em', + fontWeight: 600, + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }, + }, + ], + ...theme.applyStyles('dark', { + backgroundColor: 'inherit', + }), +})); + +const StatValue = styled('div', { + name: 'MuiStat', + slot: 'value', +})<{ ownerState: StatOwnerState }>(({ theme }) => ({ + ...theme.typography.h3, +})); + +const StatUnit = styled('div', { + name: 'MuiStat', + slot: 'unit', +})<{ ownerState: StatOwnerState }>(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + color: 'inherit', + }), +})); + +const Stat = React.forwardRef( + function Stat(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiStat' }); + const { value, unit, variant, ...other } = props; + + const ownerState = { ...props, variant }; + + return ( + + {value} + {unit} + + ); + }, +); + +export default function StatFullTemplate() { + return ( + + + + + ); +} +``` diff --git a/docs/public/material-ui/customization/css-layers.md b/docs/public/material-ui/customization/css-layers.md new file mode 100644 index 00000000000000..ab9e58620ec2f5 --- /dev/null +++ b/docs/public/material-ui/customization/css-layers.md @@ -0,0 +1,417 @@ +# CSS Layers + +Learn how to generate Material UI styles with cascade layers. + +## What are cascade layers? + +Cascade layers are an advanced CSS feature that make it possible to control the order in which styles are applied to elements. +If you're not familiar with cascade layers, visit the [MDN documentation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) for a detailed overview. + +Benefits of using cascade layers include: + +- **Improved specificity**: Cascade layers let you control the order of the styles, which can help avoid specificity conflicts. For example, you can theme a component without hitting the default specificity of the styles. +- **Better integration with CSS frameworks**: With cascade layers, you can use Tailwind CSS v4 utility classes to override Material UI styles without the need for the `!important` directive. +- **Better debuggability**: Cascade layers appear in the browser's dev tools, making it easier to see which styles are applied and in what order. + +## Implementing a single cascade layer + +This method creates a single layer, namely `@layer mui`, for all Material UI components and global styles. +This is suitable for integrating with other styling solutions, such as Tailwind CSS v4, that use the `@layer` directive. + +### Next.js App Router + +Start by configuring Material UI with Next.js in the [App Router integration guide](/material-ui/integrations/nextjs/#app-router). +Then follow these steps: + +1. Enable the [CSS layer feature](/material-ui/integrations/nextjs/#using-other-styling-solutions) in the root layout: + +```tsx title="src/app/layout.tsx" +import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter'; + +export default function RootLayout() { + return ( + + + + {/* Your app */} + + + + ); +} +``` + +2. Configure the layer order at the top of a CSS file to work with Tailwind CSS v4: + +```css title="src/app/globals.css" +@layer theme, base, mui, components, utilities; +``` + +### Next.js Pages Router + +Start by configuring Material UI with Next.js in the [Pages Router integration guide](/material-ui/integrations/nextjs/#pages-router). +Then follow these steps: + +1. Enable the [CSS layer feature](/material-ui/integrations/nextjs/#configuration-2) in a custom `_document`: + +```tsx title="pages/_document.tsx" +import { + createCache, + documentGetInitialProps, +} from '@mui/material-nextjs/v15-pagesRouter'; + +// ... + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const finalProps = await documentGetInitialProps(ctx, { + emotionCache: createCache({ enableCssLayer: true }), + }); + return finalProps; +}; +``` + +2. Configure the layer order with the `GlobalStyles` component to work with Tailwind CSS v4—it must be the first child of the `AppCacheProvider`: + +```tsx title="pages/_app.tsx" +import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter'; +import GlobalStyles from '@mui/material/GlobalStyles'; + +export default function MyApp(props: AppProps) { + const { Component, pageProps } = props; + return ( + + + + + ); +} +``` + +### Vite or any other SPA + +Make the following changes in `src/main.tsx`: + +1. Pass the `enableCssLayer` prop to the `StyledEngineProvider` component. +2. Configure the layer order with the `GlobalStyles` component to work with Tailwind CSS v4. + +```tsx title="main.tsx" +import { StyledEngineProvider } from '@mui/material/styles'; +import GlobalStyles from '@mui/material/GlobalStyles'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + {/* Your app */} + + , +); +``` + +## Implementing multiple cascade layers + +After you've set up a [single cascade layer](#implementing-a-single-cascade-layer), you can split the styles into multiple layers to better organize them within Material UI. +This makes it simpler to apply theming and override styles with the `sx` prop. + +First, follow the steps from the [previous section](#implementing-a-single-cascade-layer) to enable the CSS layer feature. +Then, create a new file and export the component that wraps the `ThemeProvider` from Material UI. +Finally, pass the `modularCssLayers: true` option to the `createTheme` function: + +```tsx title="src/theme.tsx" +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const theme = createTheme({ + modularCssLayers: true, +}); + +export default function AppTheme({ children }: { children: ReactNode }) { + return {children}; +} +``` + +```tsx +import * as React from 'react'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import FormHelperText from '@mui/material/FormHelperText'; + +const theme = createTheme({ + modularCssLayers: true, + cssVariables: true, +}); + +export default function CssLayersInput() { + return ( + + + + Label + + + Helper text goes here + + + ); +} +``` + +When this feature is enabled, Material UI generates these layers: + +- `@layer mui.global`: Global styles from the `GlobalStyles` and `CssBaseline` components. +- `@layer mui.components`: Base styles for all Material UI components. +- `@layer mui.theme`: Theme styles for all Material UI components. +- `@layer mui.custom`: Custom styles for non-Material UI styled components. +- `@layer mui.sx`: Styles from the `sx` prop. + +The sections below demonstrate how to set up multiple cascade layers for Material UI with common React frameworks. + +### Next.js App Router + +```tsx title="src/theme.tsx" +'use client'; +import React from 'react'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const theme = createTheme({ + modularCssLayers: true, +}); + +export default function AppTheme({ children }: { children: React.ReactNode }) { + return {children}; +} +``` + +```tsx title="src/app/layout.tsx" +import AppTheme from '../theme'; + +export default function RootLayout() { + return ( + + + + {/* Your app */} + + + + ); +} +``` + +### Next.js Pages Router + +```tsx title="src/theme.tsx" +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const theme = createTheme({ + modularCssLayers: true, +}); + +export default function AppTheme({ children }: { children: ReactNode }) { + return {children}; +} +``` + +```tsx title="pages/_app.tsx" +import AppTheme from '../src/theme'; + +export default function MyApp(props: AppProps) { + const { Component, pageProps } = props; + return ( + + + + + + ); +} +``` + +```tsx title="pages/_document.tsx" +import { + createCache, + documentGetInitialProps, +} from '@mui/material-nextjs/v15-pagesRouter'; + +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const finalProps = await documentGetInitialProps(ctx, { + emotionCache: createCache({ enableCssLayer: true }), + }); + return finalProps; +}; +``` + +### Vite or any other SPA + +```tsx title="src/theme.tsx" +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const theme = createTheme({ + modularCssLayers: true, +}); + +export default function AppTheme({ children }: { children: ReactNode }) { + return {children}; +} +``` + +```tsx title="src/main.tsx" +import AppTheme from './theme'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + {/* Your app */} + + , +); +``` + +### Usage with other styling solutions + +To integrate with other styling solutions, such as Tailwind CSS v4, replace the boolean value for `modularCssLayers` with a string specifying the layer order. +Material UI will look for the `mui` identifier and generate the layers in the correct order: + +```diff title="src/theme.tsx" + const theme = createTheme({ +- modularCssLayers: true, ++ modularCssLayers: '@layer theme, base, mui, components, utilities;', + }); +``` + +The generated CSS will look like this: + +```css +@layer theme, base, mui.global, mui.components, mui.theme, mui.custom, mui.sx, components, utilities; +``` + +### Caveats + +If you enable `modularCssLayers` in an app that already has custom styles and theme overrides applied to it, you may observe unexpected changes to the look and feel of the UI due to the differences in specificity before and after. + +For example, if you have the following [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) for the [Accordion](/material-ui/react-accordion/) component: + +```js +const theme = createTheme({ + components: { + MuiAccordion: { + styleOverrides: { + root: { + margin: 0, + }, + }, + }, + }, +}); +``` + +By default, the margin from the theme does _not_ take precedence over the default margin styles when the accordion is expanded, because it has higher specificity than the theme styles—so this code has no effect. + +After enabling the `modularCssLayers` option, the margin from the theme _does_ take precedence because the theme layer comes after the components layer in the cascade order—so the style override is applied and the accordion has no margins when expanded. + +```tsx +import * as React from 'react'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import Typography from '@mui/material/Typography'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import Box from '@mui/material/Box'; +import Switch from '@mui/material/Switch'; + +export default function CssLayersCaveat() { + const [cssLayers, setCssLayers] = React.useState(false); + const theme = React.useMemo(() => { + return createTheme({ + modularCssLayers: cssLayers, + cssVariables: true, + components: { + MuiAccordion: { + styleOverrides: { + root: { + margin: 0, + }, + }, + }, + }, + }); + }, [cssLayers]); + return ( +
+ + + No CSS Layers + + setCssLayers(!cssLayers)} /> + + With CSS Layers + + + +
+ + } + aria-controls="panel1-content" + id="panel1-header" + > + Accordion 1 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + } + aria-controls="panel2-content" + id="panel2-header" + > + Accordion 2 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + +
+ +
+ ); +} +``` diff --git a/docs/public/material-ui/customization/dark-mode.md b/docs/public/material-ui/customization/dark-mode.md new file mode 100644 index 00000000000000..8e1f71f10c14d6 --- /dev/null +++ b/docs/public/material-ui/customization/dark-mode.md @@ -0,0 +1,596 @@ +# Dark mode + +Material UI comes with two palette modes: light (the default) and dark. + +## Dark mode only + +You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme()` helper: + +```js +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; + +const darkTheme = createTheme({ + palette: { + mode: 'dark', + }, +}); + +export default function App() { + return ( + + +
This app is using the dark mode
+ + ); +} +``` + +Adding `mode: 'dark'` to the `createTheme()` helper modifies several palette values, as shown in the following demo: + +```jsx +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Box from '@mui/material/Box'; +import { styled, ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; + +const Root = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + padding: theme.spacing(2), + borderRadius: 4, + [theme.breakpoints.up('md')]: { + padding: theme.spacing(3), + }, +})); + +const Color = styled(Grid)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + '& div:first-of-type': { + width: theme.spacing(5), + height: theme.spacing(5), + flexShrink: 0, + marginRight: theme.spacing(1.5), + borderRadius: theme.shape.borderRadius, + }, +})); + +function Demo() { + const theme = useTheme(); + + const item = (color, name, expanded = false, border = false) => ( + +
+
+ {name} + + {color} + +
+ + ); + + return ( + + + Typography + + + {item(theme.palette.text.primary, 'palette.text.primary')} + {item(theme.palette.text.secondary, 'palette.text.secondary')} + {item(theme.palette.text.disabled, 'palette.text.disabled')} + + + Buttons + + + {item(theme.palette.action.active, 'palette.action.active')} + {item(theme.palette.action.hover, 'palette.action.hover')} + {item(theme.palette.action.selected, 'palette.action.selected')} + {item(theme.palette.action.disabled, 'palette.action.disabled')} + {item( + theme.palette.action.disabledBackground, + 'palette.action.disabledBackground', + true, + )} + + + Background + + + {item( + theme.palette.background.default, + 'palette.background.default', + false, + true, + )} + {item( + theme.palette.background.paper, + 'palette.background.paper', + false, + true, + )} + + + Divider + + + {item(theme.palette.divider, 'palette.divider')} + + + ); +} + +const darkTheme = createTheme({ + palette: { + // Switching the dark mode on is a single property value change. + mode: 'dark', + }, +}); + +export default function DarkTheme() { + return ( + + + + + + ); +} +``` + +Adding `` inside of the `` component will also enable dark mode for the app's background. + +:::warning +Setting the dark mode this way only works if you are using [the default palette](/material-ui/customization/default-theme/). If you have a custom palette, make sure that you have the correct values based on the `mode`. The next section explains how to do this. +::: + +### Overriding the dark palette + +To override the default palette, provide a [palette object](/material-ui/customization/palette/#default-colors) with custom colors in hex, RGB, or HSL format: + +```jsx +const darkTheme = createTheme({ + palette: { + mode: 'dark', + primary: { + main: '#ff5252', + }, + }, +}); +``` + +Learn more about palette structure in the [Palette documentation](/material-ui/customization/palette/). + +## System preference + +Some users set a preference for light or dark mode through their operating system—either systemwide, or for individual user agents. +The following sections explain how to apply these preferences to an app's theme. + +### Built-in support + +Use the `colorSchemes` node to build an application with multiple color schemes. +The built-in color schemes are `light` and `dark` which can be enabled by setting the value to `true`. + +The light color scheme is enabled by default, so you only need to set the dark color scheme: + +```js +import { ThemeProvider, createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + colorSchemes: { + dark: true, + }, +}); + +function App() { + return ...; +} +``` + +When `colorSchemes` is provided, the following features are activated: + +- Automatic switching between light and dark color schemes based on the user's preference +- Synchronization between window tabs—changes to the color scheme in one tab are applied to all other tabs +- An option to [disable transitions](#disable-transitions) when the color scheme changes + +:::info +The `colorSchemes` API is an enhanced version of the earlier and more limited `palette` API—the aforementioned features are only accessible with the `colorSchemes` API, so we recommend using it over the `palette` API. +If both `colorSchemes` and `palette` are provided, `palette` will take precedence. +::: + +:::success +To test the system preference feature, follow the guide on [emulating the CSS media feature `prefers-color-scheme`](https://developer.chrome.com/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-color-scheme). +::: + +### Accessing media prefers-color-scheme + +You can make use of this preference with the [`useMediaQuery`](/material-ui/react-use-media-query/) hook and the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query. + +The following demo shows how to check the user's preference in their OS or browser settings: + +```jsx +import * as React from 'react'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; + +function App() { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + return
prefersDarkMode: {prefersDarkMode.toString()}
; +} +``` + +## Toggling color mode + +To give your users a way to toggle between modes for [built-in support](#built-in-support), use the `useColorScheme` hook to read and update the mode. + +:::info +The `mode` is always `undefined` on first render, so make sure to handle this case as shown in the demo below—otherwise you may encounter a hydration mismatch error. +::: + +```tsx +import * as React from 'react'; +import Box from '@mui/material/Box'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormLabel from '@mui/material/FormLabel'; +import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles'; + +function MyApp() { + const { mode, setMode } = useColorScheme(); + if (!mode) { + return null; + } + return ( + + + Theme + + setMode(event.target.value as 'system' | 'light' | 'dark') + } + > + } label="System" /> + } label="Light" /> + } label="Dark" /> + + + + ); +} + +const theme = createTheme({ + colorSchemes: { + dark: true, + }, +}); + +export default function ToggleColorMode() { + return ( + + + + ); +} +``` + +## Storage manager + +By default, the [built-in support](#built-in-support) for color schemes uses the browser's `localStorage` API to store the user's mode and scheme preference. + +To use a different storage manager, create a custom function with this signature: + +```ts +type Unsubscribe = () => void; + +function storageManager(params: { key: string }): { + get: (defaultValue: any) => any; + set: (value: any) => void; + subscribe: (handler: (value: any) => void) => Unsubscribe; +}; +``` + +Then pass it to the `storageManager` prop of the `ThemeProvider` component: + +```tsx +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import type { StorageManager } from '@mui/material/styles'; + +const theme = createTheme({ + colorSchemes: { + dark: true, + }, +}); + +function storageManager(params): StorageManager { + return { + get: (defaultValue) => { + // Your implementation + }, + set: (value) => { + // Your implementation + }, + subscribe: (handler) => { + // Your implementation + return () => { + // cleanup + }; + }, + }; +} + +function App() { + return ( + + ... + + ); +} +``` + +:::warning +If you are using the `InitColorSchemeScript` component to [prevent SSR flickering](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering), you have to include the `localStorage` implementation in your custom storage manager. +::: + +### Disable storage + +To disable the storage manager, pass `null` to the `storageManager` prop: + +```tsx + + ... + +``` + +:::warning +Disabling the storage manager will cause the app to reset to its default mode whenever the user refreshes the page. +::: + +## Disable transitions + +To instantly switch between color schemes with no transition, apply the `disableTransitionOnChange` prop to the `ThemeProvider` component: + +```jsx + + ... + +``` + +## Disable double rendering + +By default, the `ThemeProvider` rerenders when the theme contains light **and** dark color schemes to prevent SSR hydration mismatches. + +To disable this behavior, use the `noSsr` prop: + +```jsx + +``` + +`noSsr` is useful if you are building: + +- A client-only application, such as a single-page application (SPA). This prop will optimize the performance and prevent the dark mode flickering when users refresh the page. +- A server-rendered application with [Suspense](https://react.dev/reference/react/Suspense). However, you must ensure that the server render output matches the initial render output on the client. + +## Setting the default mode + +When `colorSchemes` is provided, the default mode is `system`, which means the app uses the system preference when users first visit the site. + +To set a different default mode, pass the `defaultMode` prop to the ThemeProvider component: + +```js + +``` + +:::info +The `defaultMode` value can be `'light'`, `'dark'`, or `'system'`. +::: + +### InitColorSchemeScript component + +If you are using the `InitColorSchemeScript` component to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering), you have to set the `defaultMode` with the same value you passed to the `ThemeProvider` component: + +```js + +``` + +## Styling in dark mode + +Use the `theme.applyStyles()` utility to apply styles for a specific mode. + +We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits: + + + +- It can be used with [Pigment CSS](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react), our in-house zero-runtime CSS-in-JS solution. +- It is generally more readable and maintainable. +- It is slightly more performant as it doesn't require to do style recalculation but the bundle size of SSR generated styles is larger. + +### Usage + +With the `styled` function: + +```jsx +import { styled } from '@mui/material/styles'; + +const MyComponent = styled('div')(({ theme }) => [ + { + color: '#fff', + backgroundColor: theme.palette.primary.main, + '&:hover': { + boxShadow: theme.shadows[3], + backgroundColor: theme.palette.primary.dark, + }, + }, + theme.applyStyles('dark', { + backgroundColor: theme.palette.secondary.main, + '&:hover': { + backgroundColor: theme.palette.secondary.dark, + }, + }), +]); +``` + +With the `sx` prop: + +```jsx +import Button from '@mui/material/Button'; + +; +``` + +:::warning +When `cssVariables: true`, styles applied with `theme.applyStyles()` have higher specificity than those defined outside of it. +So if you need to override styles, you must also use `theme.applyStyles()` as shown below: + +```jsx +const BaseButton = styled('button')(({ theme }) => + theme.applyStyles('dark', { + backgroundColor: 'white', + }), +); + +const AliceblueButton = styled(BaseButton)({ + backgroundColor: 'aliceblue', // In dark mode, backgroundColor will be white as theme.applyStyles() has higher specificity +}); + +const PinkButton = styled(BaseButton)(({ theme }) => + theme.applyStyles('dark', { + backgroundColor: 'pink', // In dark mode, backgroundColor will be pink + }), +); +``` + +::: + +### API + +`theme.applyStyles(mode, styles) => CSSObject` + +Apply styles for a specific mode. + +#### Arguments + +- `mode` (`'light' | 'dark'`) - The mode for which the styles should be applied. +- `styles` (`CSSObject`) - An object that contains the styles to be applied for the specified mode. + +#### Overriding applyStyles + +You can override `theme.applyStyles()` with a custom function to gain complete control over the values it returns. +Please review the [source code](https://github.com/mui/material-ui/blob/HEAD/packages/mui-system/src/createTheme/applyStyles.ts) to understand how the default implementation works before overriding it. +For instance, if you need the function to return a string instead of an object so it can be used inside template literals: + +```js +const theme = createTheme({ + cssVariables: { + colorSchemeSelector: '.mode-%s', + }, + colorSchemes: { + dark: {}, + light: {}, + }, + applyStyles: function (key: string, styles: any) { + // return a string instead of an object + return `*:where(.mode-${key}) & {${styles}}`; + }, +}); + +const StyledButton = styled('button')` + ${theme.applyStyles( + 'dark', ` + background: white; + ` + )} +`; +``` + +### Codemod + +We provide codemods to migrate your codebase from using `theme.palette.mode` to use `theme.applyStyles()`. +You can run each codemod below or all of them at once. + +```bash +npx @mui/codemod@latest v6.0.0/styled +npx @mui/codemod@latest v6.0.0/sx-prop +npx @mui/codemod@latest v6.0.0/theme-v6 +``` + +> Run `v6.0.0/theme-v6` against the file that contains the custom `styleOverrides`. Ignore this codemod if you don't have a custom theme. + +## Dark mode flicker + +### The problem + +Server-rendered apps are built before they reach the user's device. +This means they can't automatically adjust to the user's preferred color scheme when first loaded. + +Here's what typically happens: + +1. You load the app and set it to dark mode. +2. You refresh the page. +3. The app briefly appears in light mode (the default). +4. Then it switches back to dark mode once the app fully loads. + +This "flash" of light mode happens every time you open the app, as long as your browser remembers your dark mode preference. + +This sudden change can be jarring, especially in low-light environments. +It can strain your eyes and disrupt your experience, particularly if you interact with the app during this transition. + +To better understand this issue, take a look at the animated image below: + +An example video that shows a page that initially loads correctly in dark mode but quickly flickers to light mode. + +### The solution: CSS variables + +Solving this problem requires a novel approach to styling and theming. +(See this [RFC on CSS variables support](https://github.com/mui/material-ui/issues/27651) to learn more about the implementation of this feature.) + +For applications that need to support light and dark mode using CSS media `prefers-color-scheme`, enabling the [CSS variables feature](/material-ui/customization/css-theme-variables/usage/#light-and-dark-modes) fixes the issue. + +But if you want to be able to toggle between modes manually, avoiding the flicker requires a combination of CSS variables and the `InitColorSchemeScript` component. +Check out the [Preventing SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering) section for more details. diff --git a/docs/public/material-ui/customization/default-theme.md b/docs/public/material-ui/customization/default-theme.md new file mode 100644 index 00000000000000..55ee97c8cb7b93 --- /dev/null +++ b/docs/public/material-ui/customization/default-theme.md @@ -0,0 +1,216 @@ +# Default theme viewer + +This tree view allows you to explore how the theme object looks like with the default values. + +If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.ts`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.ts), +and the related imports which `createTheme()` uses. + +You can play with the documentation theme object in your browser console, +as the `theme` variable is exposed on all the documentation pages. + +:::warning +Please note that **the documentation site is using a custom theme** (the MUI's organization branding). +::: + +
+ +```jsx +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import { createTheme, styled } from '@mui/material/styles'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; +import { useTranslate } from '@mui/docs/i18n'; +import ThemeViewer, { + useItemIdsLazy, +} from 'docs/src/modules/components/ThemeViewer'; +import { blue, grey } from '@mui/docs/branding'; + +const StyledSwitch = styled(Switch)(({ theme }) => [ + { + display: 'flex', + padding: 0, + width: 32, + height: 20, + borderRadius: 99, + '&:active': { + '& .MuiSwitch-thumb': { + width: 16, + }, + '& .MuiSwitch-switchBase.Mui-checked': { + transform: 'translateX(9px)', + }, + }, + '& .MuiSwitch-switchBase': { + padding: 2, + '&.Mui-checked': { + transform: 'translateX(12px)', + color: '#FFF', + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: blue[500], + }, + }, + }, + '& .MuiSwitch-thumb': { + width: 16, + height: 16, + borderRadius: 99, + transition: theme.transitions.create(['width'], { + duration: 200, + }), + }, + '& .MuiSwitch-track': { + borderRadius: 16 / 2, + opacity: 1, + backgroundColor: grey[400], + boxSizing: 'border-box', + }, + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& .MuiSwitch-switchBase': { + '&.Mui-checked': { + '& + .MuiSwitch-track': { + backgroundColor: blue[500], + }, + }, + }, + '& .MuiSwitch-track': { + backgroundColor: grey[700], + }, + }, + }, +]); + +function DefaultTheme() { + const [checked, setChecked] = React.useState(false); + const [expandPaths, setExpandPaths] = React.useState(null); + const t = useTranslate(); + const [darkTheme, setDarkTheme] = React.useState(false); + + React.useEffect(() => { + let expandPath; + decodeURI(document.location.search.slice(1)) + .split('&') + .forEach((param) => { + const [name, value] = param.split('='); + if (name === 'expand-path') { + expandPath = value; + } + }); + + if (!expandPath) { + return; + } + + setExpandPaths( + expandPath + .replace('$.', '') + .split('.') + .reduce((acc, path) => { + const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : ''; + acc.push(last + path); + return acc; + }, []), + ); + }, []); + + const data = React.useMemo(() => { + const themeData = createTheme({ + palette: { mode: darkTheme ? 'dark' : 'light' }, + }); + + const { + unstable_sxConfig: unstableSxConfig, + unstable_sx: unstableSx, + ...rest + } = themeData; + + return rest; + }, [darkTheme]); + + const allNodeIds = useItemIdsLazy(data); + React.useDebugValue(allNodeIds); + + const currentExpandPaths = React.useMemo(() => { + if (expandPaths !== null) { + return expandPaths; + } + return checked ? allNodeIds : []; + }, [checked, allNodeIds, expandPaths]); + + const collapsedThemeViewer = React.useMemo( + () => , + [data], + ); + + const expandedThemeViewer = React.useMemo( + () => , + [data, allNodeIds], + ); + + return ( + + + { + setChecked(event.target.checked); + }} + /> + } + /> + + { + setDarkTheme(event.target.checked); + }} + /> + } + /> + + {expandPaths !== null ? ( + + ) : ( + + + {collapsedThemeViewer} + + + {expandedThemeViewer} + + + )} + + ); +} + +export default DefaultTheme; +``` diff --git a/docs/public/material-ui/customization/density.md b/docs/public/material-ui/customization/density.md new file mode 100644 index 00000000000000..1044b96b6015de --- /dev/null +++ b/docs/public/material-ui/customization/density.md @@ -0,0 +1,241 @@ +# Density + +How to apply density to Material UI components. + +## Applying density + +This section explains how to apply density. +It doesn't cover potential use cases, or considerations for using density in your application. +The Material Design guidelines have a [comprehensive guide](https://m2.material.io/design/layout/applying-density.html) covering these topics in more detail. + +## Implementing density + +Higher density can be applied to some components via props. The component pages +have at least one example using the respective component with higher density applied. + +Depending on the component, density is applied either via lower spacing, or simply by +reducing the size. + +The following components have props applying higher density: + +- [Button](/material-ui/api/button/) +- [Fab](/material-ui/api/fab/) +- [FilledInput](/material-ui/api/filled-input/) +- [FormControl](/material-ui/api/form-control/) +- [FormHelperText](/material-ui/api/form-helper-text/) +- [IconButton](/material-ui/api/icon-button/) +- [InputBase](/material-ui/api/input-base/) +- [InputLabel](/material-ui/api/input-label/) +- [ListItem](/material-ui/api/list-item/) +- [OutlinedInput](/material-ui/api/outlined-input/) +- [Table](/material-ui/api/table/) +- [TextField](/material-ui/api/text-field/) +- [Toolbar](/material-ui/api/toolbar/) + +## Explore theme density + +This tool allows you to apply density via spacing and component props. You can browse +around and see how this applies to the overall feel of Material UI components. + +If you enable high density a custom theme is applied to the docs. This theme is only +for demonstration purposes. You _should not_ apply this theme to your whole application +as this might negatively impact user experience. The [Material Design guidelines](https://m2.material.io/design/layout/applying-density.html) has examples +for when not to apply density. + +The theme is configured with the following options: + +```js +const theme = createTheme({ + components: { + MuiButton: { + defaultProps: { + size: 'small', + }, + }, + MuiFilledInput: { + defaultProps: { + margin: 'dense', + }, + }, + MuiFormControl: { + defaultProps: { + margin: 'dense', + }, + }, + MuiFormHelperText: { + defaultProps: { + margin: 'dense', + }, + }, + MuiIconButton: { + defaultProps: { + size: 'small', + }, + }, + MuiInputBase: { + defaultProps: { + margin: 'dense', + }, + }, + MuiInputLabel: { + defaultProps: { + margin: 'dense', + }, + }, + MuiListItem: { + defaultProps: { + dense: true, + }, + }, + MuiOutlinedInput: { + defaultProps: { + margin: 'dense', + }, + }, + MuiFab: { + defaultProps: { + size: 'small', + }, + }, + MuiTable: { + defaultProps: { + size: 'small', + }, + }, + MuiTextField: { + defaultProps: { + margin: 'dense', + }, + }, + MuiToolbar: { + defaultProps: { + variant: 'dense', + }, + }, + }, +}); +``` + +```jsx +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Input from '@mui/material/Input'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; +import IncreaseIcon from '@mui/icons-material/AddCircleOutline'; +import DecreaseIcon from '@mui/icons-material/RemoveCircleOutline'; +import { + DispatchContext, + ThemeOptionsContext, +} from 'docs/src/modules/components/ThemeContext'; +import { useTranslate } from '@mui/docs/i18n'; +import { setDocsSpacing, resetDocsSpacing } from 'docs/src/BrandingCssVarsProvider'; + +const minSpacing = 0; +const maxSpacing = 20; + +export default function DensityTool() { + const [spacingUnit, setSpacingUnit] = React.useState(8); + const dispatch = React.useContext(DispatchContext); + const themeOptions = React.useContext(ThemeOptionsContext); + const handleDensityChange = (event) => { + dispatch({ + type: 'SET_DENSE', + payload: event.target.checked, + }); + }; + + const handleSpacingChange = (event, value) => { + let spacing = value || +event.target.value; + + // If the entered value is greater than maxSpacing, setting up maxSpacing as value + if (spacing > maxSpacing) { + spacing = maxSpacing; + } + // If the entered value is less than minSpacing, setting up minSpacing as value + if (spacing < minSpacing) { + spacing = minSpacing; + } + + setSpacingUnit(spacing); + setDocsSpacing(spacing); + }; + + const resetDensity = () => { + setSpacingUnit(8); + resetDocsSpacing(); + dispatch({ type: 'RESET_DENSITY' }); + }; + + const t = useTranslate(); + + return ( + + + } + label={t('useHighDensity')} + /> + + + {t('spacingUnit')} + + + { + setSpacingUnit(spacingUnit - 1); + setDocsSpacing(spacingUnit - 1); + }} + disabled={spacingUnit === minSpacing} + > + + + + { + setSpacingUnit(spacingUnit + 1); + setDocsSpacing(spacingUnit + 1); + }} + disabled={spacingUnit === maxSpacing} + > + + + + + + + ); +} +``` diff --git a/docs/public/material-ui/customization/how-to-customize.md b/docs/public/material-ui/customization/how-to-customize.md new file mode 100644 index 00000000000000..1886dffbbeaac8 --- /dev/null +++ b/docs/public/material-ui/customization/how-to-customize.md @@ -0,0 +1,493 @@ +--- +productId: material-ui +components: GlobalStyles +--- + +# How to customize + +Learn how to customize Material UI components by taking advantage of different strategies for specific use cases. + +Material UI provides several different ways to customize a component's styles. Your specific context will determine which one is ideal. From narrowest to broadest use case, here are the options: + +1. [One-off customization](#1-one-off-customization) +1. [Reusable component](#2-reusable-component) +1. [Global theme overrides](#3-global-theme-overrides) +1. [Global CSS override](#4-global-css-override) + +## 1. One-off customization + +To change the styles of _one single instance_ of a component, you can use one of the following options: + +### The `sx` prop + +The [`sx` prop](/system/getting-started/the-sx-prop/) is the best option for adding style overrides to a single instance of a component in most cases. +It can be used with all Material UI components. + +```tsx +import * as React from 'react'; +import Slider from '@mui/material/Slider'; + +export default function SxProp() { + return ; +} +``` + +### Overriding nested component styles + +To customize a specific part of a component, you can use the class name provided by Material UI inside the `sx` prop. As an example, let's say you want to change the `Slider` component's thumb from a circle to a square. + +First, use your browser's dev tools to identify the class for the component slot you want to override. + +The styles injected into the DOM by Material UI rely on class names that all [follow a standard pattern](https://v6.mui.com/system/styles/advanced/#class-names): +`[hash]-Mui[Component name]-[name of the slot]`. + +In this case, the styles are applied with `.css-ae2u5c-MuiSlider-thumb` but you only really need to target the `.MuiSlider-thumb`, where `Slider` is the component and `thumb` is the slot. Use this class name to write a CSS selector within the `sx` prop (`& .MuiSlider-thumb`), and add your overrides. + +dev-tools + +```tsx +import * as React from 'react'; +import Slider from '@mui/material/Slider'; + +export default function DevTools() { + return ( + + ); +} +``` + +:::warning +These class names can't be used as CSS selectors because they are unstable. +::: + +### Overriding styles with class names + +If you want to override a component's styles using custom classes, you can use the `className` prop, available on each component. +To override the styles of a specific part of the component, use the global classes provided by Material UI, as described in the previous section **"Overriding nested component styles"** under the [`sx` prop section](#the-sx-prop). + +Visit the [Style library interoperability](/material-ui/integrations/interoperability/) guide to find examples of this approach using different styling libraries. + +### State classes + +States like _hover_, _focus_, _disabled_ and _selected_, are styled with a higher CSS specificity. To customize them, you'll need to **increase specificity**. + +Here is an example with the _disabled_ state and the `Button` component using a pseudo-class (`:disabled`): + +```css +.Button { + color: black; +} + +/* Increase the specificity */ +.Button:disabled { + color: white; +} +``` + +```jsx +