From f9caa4397529952049b1faa4b942825835374194 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 26 Apr 2021 17:36:27 -0300 Subject: [PATCH 1/6] [theme] Rename createMuiTheme to createTheme --- .../index.js | 4 +- .../index.js | 4 +- .../browser/scenarios/styled-emotion/index.js | 4 +- .../browser/scenarios/styled-sc/index.js | 4 +- benchmark/server/scenarios/server.js | 4 +- benchmark/server/scenarios/system.js | 4 +- docs/public/static/error-codes.json | 4 +- docs/scripts/buildApi.ts | 4 +- docs/src/modules/branding/BrandingRoot.tsx | 6 +-- docs/src/modules/components/ThemeContext.js | 12 ++--- docs/src/modules/utils/parseMarkdown.test.js | 6 +-- docs/src/modules/utils/textToHash.test.js | 2 +- .../about-the-lab/about-the-lab-de.md | 2 +- .../about-the-lab/about-the-lab-es.md | 2 +- .../about-the-lab/about-the-lab-fr.md | 2 +- .../about-the-lab/about-the-lab-ja.md | 2 +- .../about-the-lab/about-the-lab-pt.md | 2 +- .../about-the-lab/about-the-lab-ru.md | 2 +- .../about-the-lab/about-the-lab-zh.md | 2 +- .../components/about-the-lab/about-the-lab.md | 2 +- .../components/buttons/CustomizedButtons.js | 4 +- .../components/buttons/CustomizedButtons.tsx | 4 +- .../components/css-baseline/css-baseline.md | 2 +- .../components/icons/FontAwesomeIconSize.js | 4 +- .../components/icons/FontAwesomeIconSize.tsx | 4 +- docs/src/pages/components/icons/icons-de.md | 2 +- docs/src/pages/components/icons/icons-es.md | 4 +- docs/src/pages/components/icons/icons-fr.md | 4 +- docs/src/pages/components/icons/icons-ja.md | 4 +- docs/src/pages/components/icons/icons-pt.md | 4 +- docs/src/pages/components/icons/icons-ru.md | 4 +- docs/src/pages/components/icons/icons-zh.md | 4 +- docs/src/pages/components/icons/icons.md | 4 +- docs/src/pages/components/paper/Elevation.js | 6 +-- docs/src/pages/components/paper/Elevation.tsx | 6 +-- .../components/typography/typography-de.md | 2 +- .../components/typography/typography-es.md | 2 +- .../components/typography/typography-fr.md | 2 +- .../components/typography/typography-ja.md | 2 +- .../components/typography/typography-pt.md | 2 +- .../components/typography/typography-ru.md | 2 +- .../components/typography/typography-zh.md | 2 +- .../pages/components/typography/typography.md | 2 +- .../components/use-media-query/ThemeHelper.js | 4 +- .../use-media-query/ThemeHelper.tsx | 4 +- .../components/use-media-query/UseWidth.js | 4 +- .../components/use-media-query/UseWidth.tsx | 4 +- .../use-media-query/use-media-query-de.md | 2 +- .../use-media-query/use-media-query-es.md | 2 +- .../use-media-query/use-media-query-fr.md | 2 +- .../use-media-query/use-media-query-ja.md | 2 +- .../use-media-query/use-media-query-pt.md | 2 +- .../use-media-query/use-media-query-ru.md | 2 +- .../use-media-query/use-media-query-zh.md | 2 +- .../use-media-query/use-media-query.md | 2 +- .../breakpoints/breakpoints-de.md | 6 +-- .../breakpoints/breakpoints-es.md | 8 +-- .../breakpoints/breakpoints-fr.md | 6 +-- .../breakpoints/breakpoints-ja.md | 6 +-- .../breakpoints/breakpoints-pt.md | 4 +- .../breakpoints/breakpoints-ru.md | 6 +-- .../breakpoints/breakpoints-zh.md | 6 +-- .../customization/breakpoints/breakpoints.md | 6 +-- .../src/pages/customization/color/color-de.md | 16 +++--- .../src/pages/customization/color/color-es.md | 16 +++--- .../src/pages/customization/color/color-fr.md | 16 +++--- .../src/pages/customization/color/color-ja.md | 16 +++--- .../src/pages/customization/color/color-pt.md | 16 +++--- .../src/pages/customization/color/color-ru.md | 16 +++--- .../src/pages/customization/color/color-zh.md | 16 +++--- docs/src/pages/customization/color/color.md | 16 +++--- .../default-theme/DefaultTheme.js | 4 +- .../default-theme/default-theme-de.md | 2 +- .../default-theme/default-theme-es.md | 2 +- .../default-theme/default-theme-fr.md | 2 +- .../default-theme/default-theme-ja.md | 2 +- .../default-theme/default-theme-pt.md | 2 +- .../default-theme/default-theme-ru.md | 2 +- .../default-theme/default-theme-zh.md | 2 +- .../default-theme/default-theme.md | 4 +- .../pages/customization/density/density-de.md | 2 +- .../pages/customization/density/density-es.md | 2 +- .../pages/customization/density/density-fr.md | 2 +- .../pages/customization/density/density-ja.md | 2 +- .../pages/customization/density/density-pt.md | 2 +- .../pages/customization/density/density-ru.md | 2 +- .../pages/customization/density/density-zh.md | 2 +- .../pages/customization/density/density.md | 2 +- .../how-to-customize/DynamicThemeNesting.js | 6 +-- .../how-to-customize/DynamicThemeNesting.tsx | 6 +-- .../how-to-customize/OverrideCssBaseline.js | 4 +- .../how-to-customize/OverrideCssBaseline.tsx | 4 +- .../pages/customization/palette/DarkTheme.js | 6 +-- .../pages/customization/palette/Palette.js | 4 +- .../pages/customization/palette/Palette.tsx | 4 +- .../customization/palette/ToggleColorMode.js | 4 +- .../customization/palette/ToggleColorMode.tsx | 4 +- .../pages/customization/palette/palette-de.md | 20 +++---- .../pages/customization/palette/palette-es.md | 22 ++++---- .../pages/customization/palette/palette-fr.md | 20 +++---- .../pages/customization/palette/palette-ja.md | 20 +++---- .../pages/customization/palette/palette-pt.md | 20 +++---- .../pages/customization/palette/palette-ru.md | 20 +++---- .../pages/customization/palette/palette-zh.md | 20 +++---- .../pages/customization/palette/palette.md | 20 +++---- .../pages/customization/spacing/spacing-de.md | 8 +-- .../pages/customization/spacing/spacing-es.md | 8 +-- .../pages/customization/spacing/spacing-fr.md | 8 +-- .../pages/customization/spacing/spacing-ja.md | 8 +-- .../pages/customization/spacing/spacing-pt.md | 8 +-- .../pages/customization/spacing/spacing-ru.md | 8 +-- .../pages/customization/spacing/spacing-zh.md | 8 +-- .../pages/customization/spacing/spacing.md | 8 +-- .../theme-components/DefaultProps.js | 4 +- .../theme-components/DefaultProps.tsx | 4 +- .../theme-components/GlobalCss.js | 4 +- .../theme-components/GlobalCss.tsx | 4 +- .../theme-components/GlobalThemeOverride.js | 4 +- .../theme-components/GlobalThemeOverride.tsx | 4 +- .../theme-components/GlobalThemeVariants.js | 6 +-- .../theme-components/GlobalThemeVariants.tsx | 6 +-- .../theme-components/ThemeVariables.js | 4 +- .../theme-components/ThemeVariables.tsx | 4 +- .../theme-components/theme-components-de.md | 8 +-- .../theme-components/theme-components-es.md | 8 +-- .../theme-components/theme-components-fr.md | 8 +-- .../theme-components/theme-components-ja.md | 8 +-- .../theme-components/theme-components-pt.md | 8 +-- .../theme-components/theme-components-ru.md | 8 +-- .../theme-components/theme-components-zh.md | 8 +-- .../theme-components/theme-components.md | 8 +-- .../customization/theming/CustomStyles.js | 4 +- .../customization/theming/CustomStyles.tsx | 6 +-- .../customization/theming/ThemeNesting.js | 6 +-- .../customization/theming/ThemeNesting.tsx | 6 +-- .../theming/ThemeNestingExtend.js | 6 +-- .../theming/ThemeNestingExtend.tsx | 6 +-- .../pages/customization/theming/theming-de.md | 10 ++-- .../pages/customization/theming/theming-es.md | 10 ++-- .../pages/customization/theming/theming-fr.md | 10 ++-- .../pages/customization/theming/theming-ja.md | 10 ++-- .../pages/customization/theming/theming-pt.md | 10 ++-- .../pages/customization/theming/theming-ru.md | 10 ++-- .../pages/customization/theming/theming-zh.md | 10 ++-- .../pages/customization/theming/theming.md | 14 ++--- .../transitions/TransitionHover.js | 4 +- .../transitions/TransitionHover.tsx | 4 +- .../transitions/transitions-de.md | 4 +- .../transitions/transitions-es.md | 4 +- .../transitions/transitions-fr.md | 4 +- .../transitions/transitions-ja.md | 4 +- .../transitions/transitions-pt.md | 4 +- .../transitions/transitions-ru.md | 4 +- .../transitions/transitions-zh.md | 4 +- .../customization/transitions/transitions.md | 4 +- .../typography/CustomResponsiveFontSizes.js | 4 +- .../typography/CustomResponsiveFontSizes.tsx | 4 +- .../customization/typography/FontSizeTheme.js | 4 +- .../typography/FontSizeTheme.tsx | 4 +- .../typography/ResponsiveFontSizes.js | 4 +- .../typography/ResponsiveFontSizes.tsx | 4 +- .../typography/ResponsiveFontSizesChart.js | 4 +- .../typography/TypographyCustomVariant.js | 4 +- .../typography/TypographyCustomVariant.tsx | 4 +- .../typography/TypographyVariants.js | 4 +- .../typography/TypographyVariants.tsx | 4 +- .../customization/typography/typography-de.md | 20 +++---- .../customization/typography/typography-es.md | 20 +++---- .../customization/typography/typography-fr.md | 20 +++---- .../customization/typography/typography-ja.md | 20 +++---- .../customization/typography/typography-pt.md | 20 +++---- .../customization/typography/typography-ru.md | 20 +++---- .../customization/typography/typography-zh.md | 20 +++---- .../customization/typography/typography.md | 20 +++---- docs/src/pages/getting-started/faq/faq-de.md | 12 ++--- docs/src/pages/getting-started/faq/faq-es.md | 8 +-- docs/src/pages/getting-started/faq/faq-fr.md | 12 ++--- docs/src/pages/getting-started/faq/faq-ja.md | 12 ++--- docs/src/pages/getting-started/faq/faq-pt.md | 12 ++--- docs/src/pages/getting-started/faq/faq-ru.md | 12 ++--- docs/src/pages/getting-started/faq/faq-zh.md | 12 ++--- docs/src/pages/getting-started/faq/faq.md | 12 ++--- .../interoperability/StyledComponentsTheme.js | 4 +- .../StyledComponentsTheme.tsx | 4 +- docs/src/pages/guides/localization/Locales.js | 4 +- .../src/pages/guides/localization/Locales.tsx | 4 +- .../guides/localization/localization-de.md | 4 +- .../guides/localization/localization-es.md | 4 +- .../guides/localization/localization-fr.md | 4 +- .../guides/localization/localization-ja.md | 4 +- .../guides/localization/localization-pt.md | 4 +- .../guides/localization/localization-ru.md | 4 +- .../guides/localization/localization-zh.md | 4 +- .../pages/guides/localization/localization.md | 4 +- .../pages/guides/migration-v4/migration-v4.md | 42 +++++++++------ .../pages/guides/right-to-left/Direction.js | 4 +- .../pages/guides/right-to-left/Direction.tsx | 4 +- .../guides/right-to-left/RtlOptOutStylis.js | 4 +- .../guides/right-to-left/RtlOptOutStylis.tsx | 4 +- .../guides/right-to-left/RtlOptOutStylist.js | 4 +- .../guides/right-to-left/right-to-left-de.md | 2 +- .../guides/right-to-left/right-to-left-es.md | 2 +- .../guides/right-to-left/right-to-left-fr.md | 2 +- .../guides/right-to-left/right-to-left-ja.md | 2 +- .../guides/right-to-left/right-to-left-pt.md | 2 +- .../guides/right-to-left/right-to-left-ru.md | 2 +- .../guides/right-to-left/right-to-left-zh.md | 2 +- .../guides/right-to-left/right-to-left.md | 2 +- .../guides/routing/LinkRouterWithTheme.js | 4 +- .../guides/routing/LinkRouterWithTheme.tsx | 4 +- docs/src/pages/guides/routing/routing.md | 2 +- .../server-rendering/server-rendering-de.md | 4 +- .../server-rendering/server-rendering-es.md | 4 +- .../server-rendering/server-rendering-fr.md | 4 +- .../server-rendering/server-rendering-ja.md | 4 +- .../server-rendering/server-rendering-pt.md | 4 +- .../server-rendering/server-rendering-ru.md | 4 +- .../server-rendering/server-rendering-zh.md | 4 +- .../server-rendering/server-rendering.md | 4 +- .../pages/guides/typescript/typescript-de.md | 10 ++-- .../pages/guides/typescript/typescript-es.md | 10 ++-- .../pages/guides/typescript/typescript-fr.md | 10 ++-- .../pages/guides/typescript/typescript-ja.md | 10 ++-- .../pages/guides/typescript/typescript-pt.md | 10 ++-- .../pages/guides/typescript/typescript-ru.md | 10 ++-- .../pages/guides/typescript/typescript-zh.md | 10 ++-- .../src/pages/guides/typescript/typescript.md | 6 +-- .../premium-themes/onepirate/modules/theme.js | 4 +- .../premium-themes/onepirate/modules/theme.ts | 4 +- .../premium-themes/paperbase/Paperbase.js | 4 +- .../premium-themes/paperbase/Paperbase.tsx | 4 +- docs/src/pages/styles/advanced/advanced-de.md | 2 +- docs/src/pages/styles/advanced/advanced-es.md | 2 +- docs/src/pages/styles/advanced/advanced-fr.md | 2 +- docs/src/pages/styles/advanced/advanced-ja.md | 2 +- docs/src/pages/styles/advanced/advanced-pt.md | 2 +- docs/src/pages/styles/advanced/advanced-ru.md | 2 +- docs/src/pages/styles/advanced/advanced-zh.md | 2 +- docs/src/pages/styles/advanced/advanced.md | 2 +- .../system/advanced/StyleFunctionSxDemo.js | 4 +- .../system/advanced/StyleFunctionSxDemo.tsx | 4 +- docs/src/pages/system/basics/basics-de.md | 4 +- docs/src/pages/system/basics/basics-es.md | 4 +- docs/src/pages/system/basics/basics-fr.md | 4 +- docs/src/pages/system/basics/basics-ja.md | 4 +- docs/src/pages/system/basics/basics-pt.md | 4 +- docs/src/pages/system/basics/basics-ru.md | 4 +- docs/src/pages/system/basics/basics-zh.md | 4 +- docs/src/pages/system/basics/basics.md | 4 +- examples/cdn/index.html | 4 +- .../src/theme.tsx | 4 +- examples/create-react-app/src/theme.js | 4 +- .../theme.js | 4 +- examples/gatsby/src/theme.js | 4 +- examples/nextjs-with-typescript/src/theme.tsx | 4 +- examples/nextjs/src/theme.js | 4 +- examples/preact/src/theme.js | 4 +- examples/ssr/theme.js | 4 +- .../code/ThemeProvider.tsx | 4 +- packages/material-ui-codemod/README.md | 4 +- .../src/v4.0.0/optimal-imports.test/actual.js | 2 +- .../v4.0.0/optimal-imports.test/expected.js | 2 +- .../DesktopDateRangePicker.test.tsx | 4 +- .../StaticDatePicker.test.tsx | 4 +- .../src/makeStyles/makeStyles.test.js | 12 ++--- .../useThemeVariants/useThemeVariants.test.js | 10 ++-- .../src/withStyles/withStyles.test.js | 18 +++---- .../src/Autocomplete/Autocomplete.test.js | 4 +- packages/material-ui/src/Box/Box.d.ts | 2 +- .../src/ButtonBase/ButtonBase.test.js | 4 +- .../material-ui/src/Collapse/Collapse.test.js | 4 +- .../src/CssBaseline/CssBaseline.test.js | 6 +-- .../material-ui/src/Drawer/Drawer.test.js | 4 +- .../src/GlobalStyles/GlobalStyles.test.js | 4 +- packages/material-ui/src/Grid/Grid.test.js | 4 +- packages/material-ui/src/Grow/Grow.test.js | 4 +- .../material-ui/src/Hidden/HiddenCss.test.js | 4 +- .../material-ui/src/ListItem/ListItem.test.js | 4 +- packages/material-ui/src/Modal/Modal.test.js | 4 +- .../src/NativeSelect/NativeSelect.test.js | 4 +- .../src/OutlinedInput/NotchedOutline.test.js | 6 +-- .../src/Pagination/Pagination.test.js | 6 +-- packages/material-ui/src/Paper/Paper.test.js | 4 +- .../material-ui/src/Popper/Popper.test.js | 4 +- .../material-ui/src/Select/Select.test.js | 4 +- packages/material-ui/src/Slide/Slide.test.js | 4 +- .../material-ui/src/Slider/Slider.test.js | 8 +-- packages/material-ui/src/Stack/Stack.d.ts | 2 +- packages/material-ui/src/Stack/Stack.test.js | 4 +- packages/material-ui/src/Tabs/Tabs.test.js | 4 +- .../material-ui/src/styles/adaptV4Theme.d.ts | 2 +- .../src/styles/createMixins.spec.ts | 4 +- .../src/styles/createMixins.test.js | 4 +- .../src/styles/createMuiStrictModeTheme.js | 4 +- .../material-ui/src/styles/createPalette.js | 4 +- .../src/styles/createPalette.spec.ts | 4 +- .../{createMuiTheme.d.ts => createTheme.d.ts} | 2 +- .../{createMuiTheme.js => createTheme.js} | 4 +- ...teMuiTheme.test.js => createTheme.test.js} | 53 +++++++++---------- .../src/styles/createTypography.spec.ts | 4 +- .../material-ui/src/styles/defaultTheme.js | 4 +- .../src/styles/experimentalStyled.d.ts | 2 +- .../src/styles/experimentalStyled.test.js | 10 ++-- packages/material-ui/src/styles/index.d.ts | 4 +- packages/material-ui/src/styles/index.js | 2 +- .../material-ui/src/styles/makeStyles.d.ts | 2 +- .../src/styles/responsiveFontSizes.d.ts | 2 +- .../src/styles/responsiveFontSizes.test.js | 8 +-- packages/material-ui/src/styles/styled.d.ts | 2 +- packages/material-ui/src/styles/useTheme.d.ts | 2 +- .../material-ui/src/styles/withStyles.d.ts | 2 +- .../material-ui/src/styles/withTheme.d.ts | 2 +- .../src/withWidth/withWidth.test.js | 6 +-- .../badgeCustomProps.spec.tsx | 4 +- .../breakpointsOverrides.spec.ts | 4 +- .../buttonCustomProps.spec.tsx | 4 +- .../moduleAugmentation/paletteColors.spec.ts | 4 +- .../textFieldCustomProps.spec.tsx | 4 +- .../themeComponents.spec.ts | 4 +- .../typographyVariants.spec.tsx | 6 +-- .../test/typescript/styles.spec.tsx | 16 +++--- scripts/sizeSnapshot/webpack.config.js | 4 +- test/utils/describeConformanceV5.js | 12 ++--- 323 files changed, 969 insertions(+), 962 deletions(-) rename packages/material-ui/src/styles/{createMuiTheme.d.ts => createTheme.d.ts} (94%) rename packages/material-ui/src/styles/{createMuiTheme.js => createTheme.js} (97%) rename packages/material-ui/src/styles/{createMuiTheme.test.js => createTheme.test.js} (64%) diff --git a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js index 2683a08ce5f82d..cfc96e185a1fee 100644 --- a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js @@ -1,12 +1,12 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import styledComponents, { ThemeProvider as StyledComponentsThemeProvider, } from 'styled-components'; import { spacing, palette, typography, compose } from '@material-ui/system'; const materialSystem = compose(palette, spacing, typography); -const materialSystemTheme = createMuiTheme(); +const materialSystemTheme = createTheme(); const BoxMaterialSystem = styledComponents('div')(materialSystem); export default function StyledComponentsBoxMaterialUISystem() { diff --git a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js index 5e1b5353622f49..5374c641a0b0a2 100644 --- a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import styledComponents, { ThemeProvider as StyledComponentsThemeProvider, } from 'styled-components'; @@ -8,7 +8,7 @@ import { space, color, fontFamily, fontSize, compose } from 'styled-system'; const styledSystem = compose(color, space, fontFamily, fontSize); const BoxStyledSystem = styledComponents('div')(styledSystem); -const styledSystemTheme = createMuiTheme(); +const styledSystemTheme = createTheme(); styledSystemTheme.breakpoints = ['40em', '52em', '64em']; styledSystemTheme.colors = styledSystemTheme.palette; styledSystemTheme.fontSizes = styledSystemTheme.typography; diff --git a/benchmark/browser/scenarios/styled-emotion/index.js b/benchmark/browser/scenarios/styled-emotion/index.js index 0edabb3f598958..522c57a1825cd8 100644 --- a/benchmark/browser/scenarios/styled-emotion/index.js +++ b/benchmark/browser/scenarios/styled-emotion/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import emotionStyled from '@emotion/styled'; const Div = emotionStyled('div')( @@ -18,7 +18,7 @@ const Div = emotionStyled('div')( `, ); -const theme = createMuiTheme(); +const theme = createTheme(); export default function StyledEmotion() { return ( diff --git a/benchmark/browser/scenarios/styled-sc/index.js b/benchmark/browser/scenarios/styled-sc/index.js index f81df8ad1317b5..eb6592cb75366b 100644 --- a/benchmark/browser/scenarios/styled-sc/index.js +++ b/benchmark/browser/scenarios/styled-sc/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import styledComponents, { ThemeProvider as StyledComponentsThemeProvider, } from 'styled-components'; @@ -20,7 +20,7 @@ const Div = styledComponents('div')( `, ); -const theme = createMuiTheme(); +const theme = createTheme(); export default function StyledSC() { return ( diff --git a/benchmark/server/scenarios/server.js b/benchmark/server/scenarios/server.js index 0033f0cd285f72..6cea96dbc8ad13 100644 --- a/benchmark/server/scenarios/server.js +++ b/benchmark/server/scenarios/server.js @@ -3,7 +3,7 @@ import express from 'express'; import * as React from 'react'; import ReactDOMServer from 'react-dom/server'; import { SheetsRegistry } from 'jss'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { styled as materialStyled, StylesProvider, @@ -35,7 +35,7 @@ function renderFullPage(html, css) { `; } -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, accent: red, diff --git a/benchmark/server/scenarios/system.js b/benchmark/server/scenarios/system.js index e0b4c46731d846..e1fa44b86031b2 100644 --- a/benchmark/server/scenarios/system.js +++ b/benchmark/server/scenarios/system.js @@ -2,7 +2,7 @@ import Benchmark from 'benchmark'; import { unstable_styleFunctionSx as styleFunctionSx } from '@material-ui/system'; import styledSystemCss from '@styled-system/css'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { css as chakraCss } from '@chakra-ui/system'; const suite = new Benchmark.Suite('system', { @@ -12,7 +12,7 @@ const suite = new Benchmark.Suite('system', { }); Benchmark.options.minSamples = 100; -const materialSystemTheme = createMuiTheme(); +const materialSystemTheme = createTheme(); const styledSystemTheme = { breakpoints: ['40em', '52em', '64em'], diff --git a/docs/public/static/error-codes.json b/docs/public/static/error-codes.json index 485dc12c369807..3de3dad5c3fc44 100644 --- a/docs/public/static/error-codes.json +++ b/docs/public/static/error-codes.json @@ -3,12 +3,12 @@ "2": "Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`.", "3": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().", "4": "Material-UI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.", - "5": "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createMuiTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createMuiTheme({ palette: {\n primary: { main: green[500] },\n} });", + "5": "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });", "6": "Material-UI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.", "7": "Material-UI: `capitalize(string)` expects a string argument.", "8": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().", "9": "Material-UI: Unsupported `%s` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().", "10": "Material-UI: unsupported `%s` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.", "11": "Material-UI: The color%s provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.", - "12": "Material-UI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createMuiTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createMuiTheme({ palette: {\n primary: { main: green[500] },\n} });" + "12": "Material-UI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });" } diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 6bcfa53e27357d..df8791a2a4f115 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -34,7 +34,7 @@ import { import { pageToTitle } from 'docs/src/modules/utils/helpers'; import createGenerateClassName from '@material-ui/styles/createGenerateClassName'; import getStylesCreator from '@material-ui/styles/getStylesCreator'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { getLineFeed, getUnstyledFilename } from './helpers'; const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs'); @@ -1306,7 +1306,7 @@ async function run(argv: { mkdirSync(outputDirectory, { mode: 0o777, recursive: true }); - const theme = createMuiTheme(); + const theme = createTheme(); /** * pageMarkdown: Array<{ components: string[]; filename: string; pathname: string }> diff --git a/docs/src/modules/branding/BrandingRoot.tsx b/docs/src/modules/branding/BrandingRoot.tsx index c94c7da351cbfd..ed4ae8f53c39ed 100644 --- a/docs/src/modules/branding/BrandingRoot.tsx +++ b/docs/src/modules/branding/BrandingRoot.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { lighten, darken, createMuiTheme, alpha, ThemeProvider } from '@material-ui/core/styles'; +import { lighten, darken, createTheme, alpha, ThemeProvider } from '@material-ui/core/styles'; import NProgressBar from '@material-ui/docs/NProgressBar'; import BrandingFooter from 'docs/src/modules/branding/BrandingFooter'; @@ -50,7 +50,7 @@ function round(value: number) { const oxfordBlue = '#001E3C'; -let theme = createMuiTheme({ +let theme = createTheme({ palette: { text: { primary: oxfordBlue, @@ -104,7 +104,7 @@ let theme = createMuiTheme({ }, }); -theme = createMuiTheme(theme, { +theme = createTheme(theme, { palette: { action: { active: theme.palette.grey87, diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index a9664a217ef4c3..27b703a7250aea 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ThemeProvider as MuiThemeProvider, - createMuiTheme as createLegacyModeTheme, + createTheme as createLegacyModeTheme, unstable_createMuiStrictModeTheme as createStrictModeTheme, darken, } from '@material-ui/core/styles'; @@ -122,11 +122,11 @@ if (process.env.NODE_ENV !== 'production') { DispatchContext.displayName = 'ThemeDispatchContext'; } -let createMuiTheme; +let createTheme; if (process.env.REACT_MODE === 'legacy') { - createMuiTheme = createLegacyModeTheme; + createTheme = createLegacyModeTheme; } else { - createMuiTheme = createStrictModeTheme; + createTheme = createStrictModeTheme; } export function ThemeProvider(props) { @@ -203,7 +203,7 @@ export function ThemeProvider(props) { }, [direction]); const theme = React.useMemo(() => { - const nextTheme = createMuiTheme( + const nextTheme = createTheme( { direction, nprogress: { @@ -247,7 +247,7 @@ export function ThemeProvider(props) { // Expose the theme as a global variable so people can play with it. if (process.browser) { window.theme = theme; - window.createMuiTheme = createMuiTheme; + window.createTheme = createTheme; } }, [theme]); diff --git a/docs/src/modules/utils/parseMarkdown.test.js b/docs/src/modules/utils/parseMarkdown.test.js index 7fbb4ce3a07fec..627bfd26e5383b 100644 --- a/docs/src/modules/utils/parseMarkdown.test.js +++ b/docs/src/modules/utils/parseMarkdown.test.js @@ -103,7 +103,7 @@ authors: ['foo', 'bar'] # Theming ## API ### responsiveFontSizes(theme, options) => theme -### createMuiTheme(options, ...args) => theme +### createTheme(options, ...args) => theme `; // mock require.context function requireRaw() { @@ -129,9 +129,9 @@ authors: ['foo', 'bar'] text: 'responsiveFontSizes(​theme, options) => theme', }, { - hash: 'createmuitheme-options-args-theme', + hash: 'createtheme-options-args-theme', level: 3, - text: 'createMuiTheme(​options, ...args) => theme', + text: 'createTheme(​options, ...args) => theme', }, ], hash: 'api', diff --git a/docs/src/modules/utils/textToHash.test.js b/docs/src/modules/utils/textToHash.test.js index c116be9e690d1e..d12506e25e3c90 100644 --- a/docs/src/modules/utils/textToHash.test.js +++ b/docs/src/modules/utils/textToHash.test.js @@ -5,7 +5,7 @@ import textToHash from './textToHash'; describe('textToHash', () => { it('should hash as expected', () => { const table = [ - ['createMuiTheme(options) => theme', 'createmuitheme-options-theme'], + ['createTheme(options) => theme', 'createtheme-options-theme'], ['Typography - Font family', 'typography-font-family'], ["barre d'application", 'barre-dapplication'], [ diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-de.md b/docs/src/pages/components/about-the-lab/about-the-lab-de.md index 65cbe7650e3418..580ecb0673b96c 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-de.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-de.md @@ -44,7 +44,7 @@ In order to benefit from the [CSS overrides](/customization/theme-components/#gl ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-es.md b/docs/src/pages/components/about-the-lab/about-the-lab-es.md index 322ad8c46c769a..fdf489a9aaeba2 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-es.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-es.md @@ -44,7 +44,7 @@ Con el fin de beneficiarse de la [sobrescritura de CSS](/customization/theme-com ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md index b9dd3b4d018b8b..449d430cdb090c 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md @@ -44,7 +44,7 @@ De manière à pouvoir [ outrepasser le CSS ](/customization/theme-components/#g ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md index b6a13eb559a045..f8e750f77a2298 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md @@ -44,7 +44,7 @@ yarn add @material-ui/core ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md index efe48b43f82ec7..43490ca4d3f097 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md @@ -44,7 +44,7 @@ Para se beneficiar de [CSS overrides](/customization/theme-components/#global-st ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md index 0205b3e35279ee..5e0ba8611c3a76 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md @@ -44,7 +44,7 @@ yarn add @material-ui/core ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md index b42685b879eb48..4a2a38bd872156 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md @@ -44,7 +44,7 @@ yarn add @material-ui/core@next ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/about-the-lab/about-the-lab.md b/docs/src/pages/components/about-the-lab/about-the-lab.md index 0faffa6b435a1e..02febb0519fb52 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab.md @@ -45,7 +45,7 @@ In order to benefit from the [CSS overrides](/customization/theme-components/#gl ```tsx import '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTimeline: { styleOverrides: { diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index 10fc6dc90d7965..b8077955976cc1 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, experimentalStyled, makeStyles, ThemeProvider, @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, }, diff --git a/docs/src/pages/components/buttons/CustomizedButtons.tsx b/docs/src/pages/components/buttons/CustomizedButtons.tsx index 812795d772bcf5..190fe056849179 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.tsx +++ b/docs/src/pages/components/buttons/CustomizedButtons.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, createStyles, experimentalStyled, makeStyles, @@ -62,7 +62,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, }, diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index d5846d9ac9c9ce..3f7fb03ee2faed 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -72,7 +72,7 @@ The colors of the scrollbars can be customized to improve the contrast (especial ```jsx import darkScrollbar from '@material-ui/core/darkScrollbar'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiCssBaseline: { styleOverrides: { diff --git a/docs/src/pages/components/icons/FontAwesomeIconSize.js b/docs/src/pages/components/icons/FontAwesomeIconSize.js index 87cba2b51201ce..68d4fdcf52eb54 100644 --- a/docs/src/pages/components/icons/FontAwesomeIconSize.js +++ b/docs/src/pages/components/icons/FontAwesomeIconSize.js @@ -1,12 +1,12 @@ import * as React from 'react'; import { loadCSS } from 'fg-loadcss'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Icon from '@material-ui/core/Icon'; import MdPhone from '@material-ui/icons/Phone'; import Chip from '@material-ui/core/Chip'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/FontAwesomeIconSize.tsx b/docs/src/pages/components/icons/FontAwesomeIconSize.tsx index be20b61bed5a6f..ef114b6e2f9d9f 100644 --- a/docs/src/pages/components/icons/FontAwesomeIconSize.tsx +++ b/docs/src/pages/components/icons/FontAwesomeIconSize.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { loadCSS } from 'fg-loadcss'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Icon from '@material-ui/core/Icon'; import MdPhone from '@material-ui/icons/Phone'; import Chip from '@material-ui/core/Chip'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-de.md b/docs/src/pages/components/icons/icons-de.md index f87abb3333ae1e..a53cc7f48ecd45 100644 --- a/docs/src/pages/components/icons/icons-de.md +++ b/docs/src/pages/components/icons/icons-de.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { diff --git a/docs/src/pages/components/icons/icons-es.md b/docs/src/pages/components/icons/icons-es.md index c03d8f128c3473..61ac722097dff0 100644 --- a/docs/src/pages/components/icons/icons-es.md +++ b/docs/src/pages/components/icons/icons-es.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ Then, you can use the two-tone font directly: Note that the Font Awesome icons weren't designed like the Material Design icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-fr.md b/docs/src/pages/components/icons/icons-fr.md index 60cf294f1bb764..4a8adf74d14c99 100644 --- a/docs/src/pages/components/icons/icons-fr.md +++ b/docs/src/pages/components/icons/icons-fr.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ Then, you can use the two-tone font directly: Note that the Font Awesome icons weren't designed like the Material Design icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-ja.md b/docs/src/pages/components/icons/icons-ja.md index b451132a2fae9c..6e229018ccc6f6 100644 --- a/docs/src/pages/components/icons/icons-ja.md +++ b/docs/src/pages/components/icons/icons-ja.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ Then, you can use the two-tone font directly: Note that the Font Awesome icons weren't designed like the Material Design icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md index 247a6ca8902958..617878ac9071d0 100644 --- a/docs/src/pages/components/icons/icons-pt.md +++ b/docs/src/pages/components/icons/icons-pt.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modificar a propriedade `baseClassName` para cada uso feito do componente é repetitivo. Você pode alterar a propriedade padrão globalmente com o tema ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ Então, você pode usar a fonte de dois tons diretamente: Note que os ícones da fonte Awesome não foram projetados como os ícones do Material Design (compare as duas demonstrações anteriores). Os ícones fa são cortados para usar todo o espaço disponível. Você pode ajustar isso com uma sobrescrita global: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-ru.md b/docs/src/pages/components/icons/icons-ru.md index 9c4be1b58f54f9..462671292dab06 100644 --- a/docs/src/pages/components/icons/icons-ru.md +++ b/docs/src/pages/components/icons/icons-ru.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ Then, you can use the two-tone font directly: Note that the Font Awesome icons weren't designed like the Material Design icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons-zh.md b/docs/src/pages/components/icons/icons-zh.md index c7b83a9d3d0763..2932077c389467 100644 --- a/docs/src/pages/components/icons/icons-zh.md +++ b/docs/src/pages/components/icons/icons-zh.md @@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon'; 为了每个组件的使用都去修改 `baseClassName` 属性是很繁琐的。 你可以在全局范围内使用主题来改变默认属性。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -247,7 +247,7 @@ const theme = createMuiTheme({ 需要注意的是，Font Awesome icons 的设计并不像 Material Design icons 那样（你可以对比之前的两个 demo）。 fa icons 经过裁剪，以利用所有可用空间。 你可以通过全局覆盖的方式来适配它： ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 370f829c316387..3fc039e2adca4c 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -237,7 +237,7 @@ Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { defaultProps: { @@ -265,7 +265,7 @@ Note that the Font Awesome icons weren't designed like the Material Design icons The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiIcon: { styleOverrides: { diff --git a/docs/src/pages/components/paper/Elevation.js b/docs/src/pages/components/paper/Elevation.js index d4e1af43414edf..ae08cb93cd743b 100644 --- a/docs/src/pages/components/paper/Elevation.js +++ b/docs/src/pages/components/paper/Elevation.js @@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; import { - createMuiTheme, + createTheme, ThemeProvider, experimentalStyled as styled, } from '@material-ui/core/styles'; @@ -17,8 +17,8 @@ const Item = styled(Paper)(({ theme }) => ({ lineHeight: '60px', })); -const darkTheme = createMuiTheme({ palette: { mode: 'dark' } }); -const lightTheme = createMuiTheme({ palette: { mode: 'light' } }); +const darkTheme = createTheme({ palette: { mode: 'dark' } }); +const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( diff --git a/docs/src/pages/components/paper/Elevation.tsx b/docs/src/pages/components/paper/Elevation.tsx index 18f2c25c946ea2..d0a19f3d6583e3 100644 --- a/docs/src/pages/components/paper/Elevation.tsx +++ b/docs/src/pages/components/paper/Elevation.tsx @@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; import { - createMuiTheme, + createTheme, ThemeProvider, experimentalStyled as styled, } from '@material-ui/core/styles'; @@ -18,8 +18,8 @@ const Item = styled(Paper)(({ theme }) => ({ lineHeight: '60px', })); -const darkTheme = createMuiTheme({ palette: { mode: 'dark' } }); -const lightTheme = createMuiTheme({ palette: { mode: 'light' } }); +const darkTheme = createTheme({ palette: { mode: 'dark' } }); +const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md index 4efe7b06946a57..fa1ef58062e779 100644 --- a/docs/src/pages/components/typography/typography-de.md +++ b/docs/src/pages/components/typography/typography-de.md @@ -73,7 +73,7 @@ Die Komponente Typografie verwendet die Eigenschaft `variantMapping` um eine UI- - Sie können das Mapping [global mit dem Theme](/customization/theme-components/#default-props) ändern: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-es.md b/docs/src/pages/components/typography/typography-es.md index 7ccd9694ae9ea5..e556dd23909d03 100644 --- a/docs/src/pages/components/typography/typography-es.md +++ b/docs/src/pages/components/typography/typography-es.md @@ -73,7 +73,7 @@ The Typography component uses the `variantMapping` property to associate a UI va - You can change the mapping [globally using the theme](/customization/theme-components/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-fr.md b/docs/src/pages/components/typography/typography-fr.md index a95a3904a28c40..bd2522ea436e8f 100644 --- a/docs/src/pages/components/typography/typography-fr.md +++ b/docs/src/pages/components/typography/typography-fr.md @@ -73,7 +73,7 @@ The Typography component uses the `variantMapping` property to associate a UI va - You can change the mapping [globally using the theme](/customization/theme-components/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-ja.md b/docs/src/pages/components/typography/typography-ja.md index 82fd3801f5827d..4250872ae967f1 100644 --- a/docs/src/pages/components/typography/typography-ja.md +++ b/docs/src/pages/components/typography/typography-ja.md @@ -73,7 +73,7 @@ Typographyコンポーネントは、 `variantMapping` プロパティを使用 - 以下のようにテーマ使用して、[マッピング をグローバルに](/customization/theme-components/#default-props)変更できます。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md index 009555dfda0a71..630a7bbcdeca1b 100644 --- a/docs/src/pages/components/typography/typography-pt.md +++ b/docs/src/pages/components/typography/typography-pt.md @@ -73,7 +73,7 @@ O componente de Tipografia (Typography) usa a propriedade `variantMapping` para - Você pode alterar o mapeamento [globalmente usando o tema](/customization/theme-components/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-ru.md b/docs/src/pages/components/typography/typography-ru.md index 54c6885307b982..e3821f2fb47aaf 100644 --- a/docs/src/pages/components/typography/typography-ru.md +++ b/docs/src/pages/components/typography/typography-ru.md @@ -73,7 +73,7 @@ The Typography component uses the `variantMapping` property to associate a UI va - Вы можете изменить сопоставление вариантов [глобально используя тему](/customization/theme-components/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md index d4470e23967b9b..b69f9a9abc69e5 100644 --- a/docs/src/pages/components/typography/typography-zh.md +++ b/docs/src/pages/components/typography/typography-zh.md @@ -77,7 +77,7 @@ import '@fontsource/roboto/700.css'; - 您也可以 [使用 theme](/customization/theme-components/#default-props) 来修改全局字体映射。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTypography: { defaultProps: { diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 21f06dea25ce4c..e745a37f9fa891 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -84,7 +84,7 @@ It's important to realize that the style of a typography component is independen - You can change the mapping [globally using the theme](/customization/theme-components/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiTypography: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js index 313fc3f391043c..fc1db12fe36d28 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.js +++ b/docs/src/pages/components/use-media-query/ThemeHelper.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { @@ -9,7 +9,7 @@ function MyComponent() { return {`theme.breakpoints.up('sm') matches: ${matches}`}; } -const theme = createMuiTheme(); +const theme = createTheme(); export default function ThemeHelper() { return ( diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.tsx b/docs/src/pages/components/use-media-query/ThemeHelper.tsx index 313fc3f391043c..fc1db12fe36d28 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.tsx +++ b/docs/src/pages/components/use-media-query/ThemeHelper.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { @@ -9,7 +9,7 @@ function MyComponent() { return {`theme.breakpoints.up('sm') matches: ${matches}`}; } -const theme = createMuiTheme(); +const theme = createTheme(); export default function ThemeHelper() { return ( diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index 614d0c541c2cc1..88a8c439a822bf 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, useTheme, createTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; /** @@ -24,7 +24,7 @@ function MyComponent() { return {`width: ${width}`}; } -const theme = createMuiTheme(); +const theme = createTheme(); export default function UseWidth() { return ( diff --git a/docs/src/pages/components/use-media-query/UseWidth.tsx b/docs/src/pages/components/use-media-query/UseWidth.tsx index 8add96a2cc97f7..5a59d61a764daf 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.tsx +++ b/docs/src/pages/components/use-media-query/UseWidth.tsx @@ -4,7 +4,7 @@ import { Theme, ThemeProvider, useTheme, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; @@ -32,7 +32,7 @@ function MyComponent() { return {`width: ${width}`}; } -const theme = createMuiTheme(); +const theme = createTheme(); export default function UseWidth() { return ( diff --git a/docs/src/pages/components/use-media-query/use-media-query-de.md b/docs/src/pages/components/use-media-query/use-media-query-de.md index f5d5155ffb6437..6591d4d5df4ee2 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-de.md +++ b/docs/src/pages/components/use-media-query/use-media-query-de.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); or it can turn it on globally with the theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-es.md b/docs/src/pages/components/use-media-query/use-media-query-es.md index 9810c670db7ed2..a3b554264ce933 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-es.md +++ b/docs/src/pages/components/use-media-query/use-media-query-es.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); or it can turn it on globally with the theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-fr.md b/docs/src/pages/components/use-media-query/use-media-query-fr.md index 93c787139bd44f..0a012ef4837d3d 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-fr.md +++ b/docs/src/pages/components/use-media-query/use-media-query-fr.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); or it can turn it on globally with the theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-ja.md b/docs/src/pages/components/use-media-query/use-media-query-ja.md index 4fb04dad9041a8..6d5b1c9c9c8d78 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-ja.md +++ b/docs/src/pages/components/use-media-query/use-media-query-ja.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); or it can turn it on globally with the theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-pt.md b/docs/src/pages/components/use-media-query/use-media-query-pt.md index 407d4903572f29..9ed53b9c0f470c 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-pt.md +++ b/docs/src/pages/components/use-media-query/use-media-query-pt.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); ou pode ativar globalmente com o tema: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-ru.md b/docs/src/pages/components/use-media-query/use-media-query-ru.md index 90e20f67b53b5c..1fca71fc198382 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-ru.md +++ b/docs/src/pages/components/use-media-query/use-media-query-ru.md @@ -97,7 +97,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); или он может включить его глобально с помощью темы: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query-zh.md b/docs/src/pages/components/use-media-query/use-media-query-zh.md index edb2f0c4f9efde..7e523426733b1b 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-zh.md +++ b/docs/src/pages/components/use-media-query/use-media-query-zh.md @@ -99,7 +99,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); 或者你可以通过全局主题设置来启用它： ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md index 2a265defd8818c..8eb15503562eaf 100644 --- a/docs/src/pages/components/use-media-query/use-media-query.md +++ b/docs/src/pages/components/use-media-query/use-media-query.md @@ -104,7 +104,7 @@ const matches = useMediaQuery('(min-width:600px)', { noSsr: true }); or it can turn it on globally with the theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiUseMediaQuery: { defaultProps: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md index a626de29b78580..fb4f45e604a9b4 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-de.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md @@ -75,7 +75,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -91,7 +91,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -249,7 +249,7 @@ Einige Implementierungsdetails, die interessant sein könnten: - `options.initialWidth` (*Breakpoint* [optional]): Da `window.innerWidth` auf dem Server nicht verfügbar ist, wird eine leere Komponente während der ersten Mounts standardmäßig gerendert. Vielleicht mögen Sie eine Heuristik verwenden, um annähernd die Bildschirmbreite des Client-Browsers zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder die Client-Hinweise verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben: Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/theme-components/#default-props) zum Theme verwenden. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth Komponente ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-es.md b/docs/src/pages/customization/breakpoints/breakpoints-es.md index 5a8dccbb8a3c9b..b9998bae529e35 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-es.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md @@ -75,7 +75,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -91,7 +91,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -249,7 +249,7 @@ Some implementation details that might be interesting to being aware of: - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. In order to set the initialWidth we need to pass a custom property with this shape: https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/theme-components/#default-props) on the theme. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { @@ -277,7 +277,7 @@ const theme = createMuiTheme({ #### Ejemplos ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-fr.md b/docs/src/pages/customization/breakpoints/breakpoints-fr.md index 4f219ba7f42e1b..89d0d86ce2a4b4 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md @@ -75,7 +75,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -91,7 +91,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -249,7 +249,7 @@ Some implementation details that might be interesting to being aware of: - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. In order to set the initialWidth we need to pass a custom property with this shape: https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/theme-components/#default-props) on the theme. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ja.md b/docs/src/pages/customization/breakpoints/breakpoints-ja.md index b0365ebdbb6299..966ce8d073ff81 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md @@ -75,7 +75,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -91,7 +91,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -250,7 +250,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; グローバルに設定することもできます`](/customization/theme-components/#default-props)。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md index 5d69bb996030cb..c44fed4475a687 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md @@ -87,7 +87,7 @@ export default withWidth()(MyComponent); Sinta-se à vontade para ter quantos pontos de quebra você quiser, nomeando-os da maneira que preferir para o seu projeto. ```js -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -245,7 +245,7 @@ Alguns detalhes de implementação que podem ser interessantes para estar ciente - `options.initialWidth` (*Breakpoint* [opcional]): Como `window.innerWidth` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. Você pode querer usar uma heurística para aproximar a largura da tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma: https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/theme-components/#default-props) no tema. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Componente withWidth ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ru.md b/docs/src/pages/customization/breakpoints/breakpoints-ru.md index 370aa6ace7176a..b68fad185129d6 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md @@ -75,7 +75,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -91,7 +91,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -249,7 +249,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. In order to set the initialWidth we need to pass a custom property with this shape: https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/theme-components/#default-props) on the theme. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints-zh.md b/docs/src/pages/customization/breakpoints/breakpoints-zh.md index 4ceaa46417a677..941d24d0565a24 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md @@ -85,7 +85,7 @@ export default withWidth()(MyComponent); 如果您需要更改断点的默认值，则需要提供所有的断点值： ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -101,7 +101,7 @@ const theme = createMuiTheme({ 您可以随意设置任意数量的断点，并且也可以在项目中以您喜欢的任何方式为断点命名。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -256,7 +256,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - `options.initialWidth` （*Breakpoint* [可选的]）： 为`window.innerWidth`在服务器上不可用， 我们默认在第一次安装期间呈现空组件。 你可能需要使用一个启发式方法来估计客户端浏览器的屏幕宽度。 例如，你可以使用 user-agent 或 [client-hints](https://caniuse.com/#search=client%20hint)。 为了设置 initialWidth，我们需要传递一个类似于以下结构的自定义属性： 我们也可以在主题中使用 [`自定义属性`](/customization/theme-components/#default-props) 来设置全局的初始宽度。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md index eaeb475338a53a..cea59b8fbe05f1 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints.md +++ b/docs/src/pages/customization/breakpoints/breakpoints.md @@ -91,7 +91,7 @@ You define your project's breakpoints in the `theme.breakpoints` section of your If you change the default breakpoints's values, you need to provide them all: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -107,7 +107,7 @@ const theme = createMuiTheme({ 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 = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -277,7 +277,7 @@ Some implementation details that might be interesting to being aware of: In order to set the initialWidth we need to pass a custom prop with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/color/color-de.md b/docs/src/pages/customization/color/color-de.md index 8df11d977dba76..432acc57626b25 100644 --- a/docs/src/pages/customization/color/color-de.md +++ b/docs/src/pages/customization/color/color-de.md @@ -17,12 +17,12 @@ The Material Design team has also built an awesome palette configuration tool: [

-Die Ausgabe kann in die `createMuiTheme()` Funktion eingegeben werden: +Die Ausgabe kann in die `createTheme()` Funktion eingegeben werden: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -Nur die `Haupttöne` müssen bereitgestellt werden (es sei denn, Sie möchten `light`, `dark` oder `contrastText` weiter anpassen), da die anderen Farben von `createMuiTheme()` berechnet werden, wie in der Sektion [ Designanpassung ](/customization/palette/) beschrieben. +Nur die `Haupttöne` müssen bereitgestellt werden (es sei denn, Sie möchten `light`, `dark` oder `contrastText` weiter anpassen), da die anderen Farben von `createTheme()` berechnet werden, wie in der Sektion [ Designanpassung ](/customization/palette/) beschrieben. -Wenn Sie die standardmäßigen primären und / oder sekundären Farbtöne verwenden, wird durch das Bereitstellen von dem Farbobjekt die entsprechenden Farbtöne der Materialfarbe für main, light und dark von `createMuiTheme()` berechnet. +Wenn Sie die standardmäßigen primären und / oder sekundären Farbtöne verwenden, wird durch das Bereitstellen von dem Farbobjekt die entsprechenden Farbtöne der Materialfarbe für main, light und dark von `createTheme()` berechnet. ### Werkzeuge von der Community diff --git a/docs/src/pages/customization/color/color-es.md b/docs/src/pages/customization/color/color-es.md index a83bb6e0eae407..907705db9c2293 100644 --- a/docs/src/pages/customization/color/color-es.md +++ b/docs/src/pages/customization/color/color-es.md @@ -17,12 +17,12 @@ The Material Design team has also built an awesome palette configuration tool: [

-The output can be fed into `createMuiTheme()` function: +The output can be fed into `createTheme()` function: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -Only the `main` shades need be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/palette/) section. +Only the `main` shades need 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](/customization/palette/) section. -If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark. +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. ### Herramientas de la comunidad diff --git a/docs/src/pages/customization/color/color-fr.md b/docs/src/pages/customization/color/color-fr.md index dd21031d81a477..b9dc5a26f0695e 100644 --- a/docs/src/pages/customization/color/color-fr.md +++ b/docs/src/pages/customization/color/color-fr.md @@ -17,12 +17,12 @@ The Material Design team has also built an awesome palette configuration tool: [

-The output can be fed into `createMuiTheme()` function: +The output can be fed into `createTheme()` function: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -Only the `main` shades need be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/palette/) section. +Only the `main` shades need 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](/customization/palette/) section. -If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark. +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 diff --git a/docs/src/pages/customization/color/color-ja.md b/docs/src/pages/customization/color/color-ja.md index 76bc71fe14126d..dd4bcbf1f22dfa 100644 --- a/docs/src/pages/customization/color/color-ja.md +++ b/docs/src/pages/customization/color/color-ja.md @@ -17,12 +17,12 @@ The Material Design team has also built an awesome palette configuration tool: [

-出力は、`createMuiTheme()`関数に渡すことができます。 +出力は、`createTheme()`関数に渡すことができます。 ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -他の色は [Theme customization](/customization/palette/)セクションで説明されているように`createMuiTheme()`によって計算されるので、`main`シェーディングのみを提供する必要があります(`light`、`dark`、`contrastText`をさらにカスタマイズする場合を除きます)。 +他の色は [Theme customization](/customization/palette/)セクションで説明されているように`createTheme()`によって計算されるので、`main`シェーディングのみを提供する必要があります(`light`、`dark`、`contrastText`をさらにカスタマイズする場合を除きます)。 -デフォルトの一次または二次シェード、あるいはその両方を使用している場合にカラーオブジェクトを指定すると、`createMuiTheme()`はメイン、ライト、およびダークにマテリアルカラーからの適切なシェードを使用します。 +デフォルトの一次または二次シェード、あるいはその両方を使用している場合にカラーオブジェクトを指定すると、`createTheme()`はメイン、ライト、およびダークにマテリアルカラーからの適切なシェードを使用します。 ### コミュニティによるツール diff --git a/docs/src/pages/customization/color/color-pt.md b/docs/src/pages/customization/color/color-pt.md index 4d2e7e09aa2dfa..1eac0f46f63384 100644 --- a/docs/src/pages/customization/color/color-pt.md +++ b/docs/src/pages/customization/color/color-pt.md @@ -17,12 +17,12 @@ A equipe do Material Design também criou uma ferramenta de configuração de pa

-A saída pode ser alimentada na função `createMuiTheme()`: +A saída pode ser alimentada na função `createTheme()`: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ Para testar um esquema de cores do [material.io/design/color](https://material.i {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -A saída exibida na amostra de cores pode ser colada diretamente na função [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) (para ser usada com [`ThemeProvider`](/customization/theming/#theme-provider)): +A saída exibida na amostra de cores pode ser colada diretamente na função [`createTheme()`](/customization/theming/#createmuitheme-options-theme) (para ser usada com [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -Apenas o tom `main` precisa ser fornecido (a menos que você deseje customizar ainda mais `light`, `dark` ou `contrastText`), já que as outras cores serão calculadas por `createMuiTheme()`, como descrito na seção de [customização de tema](/customization/palette/). +Apenas o tom `main` precisa ser fornecido (a menos que você deseje customizar ainda mais `light`, `dark` ou `contrastText`), já que as outras cores serão calculadas por `createTheme()`, como descrito na seção de [customização de tema](/customization/palette/). -Se você estiver usando os tons primário e / ou secundário por padrão, fornecendo o objeto de cor, `createMuiTheme()` usará tons apropriados da cor do material para `main`, `light` e `dark`. +Se você estiver usando os tons primário e / ou secundário por padrão, fornecendo o objeto de cor, `createTheme()` usará tons apropriados da cor do material para `main`, `light` e `dark`. ### Ferramentas da comunidade diff --git a/docs/src/pages/customization/color/color-ru.md b/docs/src/pages/customization/color/color-ru.md index 36177889324aa4..b6259bcba0d050 100644 --- a/docs/src/pages/customization/color/color-ru.md +++ b/docs/src/pages/customization/color/color-ru.md @@ -17,12 +17,12 @@ The Material Design team has also built an awesome palette configuration tool: [

-The output can be fed into `createMuiTheme()` function: +The output can be fed into `createTheme()` function: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -46,13 +46,13 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -64,9 +64,9 @@ const theme = createMuiTheme({ }); ``` -Only the `main` shades need be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/palette/) section. +Only the `main` shades need 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](/customization/palette/) section. -If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark. +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. ### Инструменты, созданные сообществом diff --git a/docs/src/pages/customization/color/color-zh.md b/docs/src/pages/customization/color/color-zh.md index 46f130095c1537..13c3ba7f49dd0a 100644 --- a/docs/src/pages/customization/color/color-zh.md +++ b/docs/src/pages/customization/color/color-zh.md @@ -18,12 +18,12 @@ Material Design 团队也搭建了一个非常棒的调色板配置工具： [ma

-输出的结果可以被传入到 `createMuiTheme()` 函数中： +输出的结果可以被传入到 `createTheme()` 函数中： ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -47,13 +47,13 @@ const theme = createMuiTheme({ {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -您可以把颜色的例子中显示的输出结果直接粘贴到一个 [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) 函数里（需要与 [`ThemeProvider`](/customization/theming/#theme-provider) 配合使用）： +您可以把颜色的例子中显示的输出结果直接粘贴到一个 [`createTheme()`](/customization/theming/#createmuitheme-options-theme) 函数里（需要与 [`ThemeProvider`](/customization/theming/#theme-provider) 配合使用）： ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -65,9 +65,9 @@ const theme = createMuiTheme({ }); ``` -您只需提供 `主要的` 阴影（shades）（除非您希望进一步自定义 `light`，`dark` 或 `contrastText` 这几个属性），在 [定制主题](/customization/palette/) 章节中提到，这是因为其他颜色会由 `createMuiTheme()` 自动计算。 +您只需提供 `主要的` 阴影（shades）（除非您希望进一步自定义 `light`，`dark` 或 `contrastText` 这几个属性），在 [定制主题](/customization/palette/) 章节中提到，这是因为其他颜色会由 `createTheme()` 自动计算。 -如果你在使用默认的主要和/或次要阴影，那么通过提供一个颜色对象（color object） ，`createMuiTheme()` 将会根据主（main）、亮（light）和暗（dark）三种 material 颜色使用合适的阴影。 +如果你在使用默认的主要和/或次要阴影，那么通过提供一个颜色对象（color object） ，`createTheme()` 将会根据主（main）、亮（light）和暗（dark）三种 material 颜色使用合适的阴影。 ### 社区提供的一些工具 diff --git a/docs/src/pages/customization/color/color.md b/docs/src/pages/customization/color/color.md index aba3004eddf20f..219be86b30e498 100644 --- a/docs/src/pages/customization/color/color.md +++ b/docs/src/pages/customization/color/color.md @@ -17,12 +17,12 @@ This can help you create a color palette for your UI, as well as measure the acc

-The output can be fed into `createMuiTheme()` function: +The output can be fed into `createTheme()` function: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { light: '#757ce8', @@ -47,13 +47,13 @@ Alternatively, you can enter hex values in the Primary and Secondary text fields {{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}} -The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): +The output shown in the color sample can be pasted directly into a [`createTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -65,9 +65,9 @@ const theme = createMuiTheme({ }); ``` -Only the `main` shades need be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/palette/) section. +Only the `main` shades need 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](/customization/palette/) section. -If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark. +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 diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 7b5426e6e1c038..7e605a2df0cc2b 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -9,7 +9,7 @@ import clsx from 'clsx'; import { makeStyles, withStyles, - createMuiTheme, + createTheme, lighten, } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; @@ -290,7 +290,7 @@ function DefaultTheme(props) { }, []); const data = React.useMemo(() => { - return createMuiTheme({ + return createTheme({ palette: { mode: darkTheme ? 'dark' : 'light' }, }); }, [darkTheme]); diff --git a/docs/src/pages/customization/default-theme/default-theme-de.md b/docs/src/pages/customization/default-theme/default-theme-de.md index e5e5d8fb6ce091..f50e7aa711ca98 100644 --- a/docs/src/pages/customization/default-theme/default-theme-de.md +++ b/docs/src/pages/customization/default-theme/default-theme-de.md @@ -12,4 +12,4 @@ Explore the default theme object: -Wenn Sie mehr darüber erfahren möchten, wie das Theme zusammengestellt wird, werfen Sie einen Blick auf [`material-ui / style / createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), und die zugehörigen Importe, die `createMuiTheme` verwendet. +Wenn Sie mehr darüber erfahren möchten, wie das Theme zusammengestellt wird, werfen Sie einen Blick auf [`material-ui / style / createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), und die zugehörigen Importe, die `createTheme` verwendet. diff --git a/docs/src/pages/customization/default-theme/default-theme-es.md b/docs/src/pages/customization/default-theme/default-theme-es.md index 0477a5cfb95af0..e953b0bcca3886 100644 --- a/docs/src/pages/customization/default-theme/default-theme-es.md +++ b/docs/src/pages/customization/default-theme/default-theme-es.md @@ -12,4 +12,4 @@ Explore the default theme object: -Si deseas obtener más información sobre cómo se monta el tema, echa un vistazo a [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), y los imports que utiliza `createMuiTheme`. +Si deseas obtener más información sobre cómo se monta el tema, echa un vistazo a [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), y los imports que utiliza `createTheme`. diff --git a/docs/src/pages/customization/default-theme/default-theme-fr.md b/docs/src/pages/customization/default-theme/default-theme-fr.md index 88840f0d45c668..960fea6a5f00a4 100644 --- a/docs/src/pages/customization/default-theme/default-theme-fr.md +++ b/docs/src/pages/customization/default-theme/default-theme-fr.md @@ -12,4 +12,4 @@ Explore the default theme object: -If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), and the related imports which `createMuiTheme` uses. +If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), and the related imports which `createTheme` uses. diff --git a/docs/src/pages/customization/default-theme/default-theme-ja.md b/docs/src/pages/customization/default-theme/default-theme-ja.md index ffde6d7061925b..bf878ec9b00570 100644 --- a/docs/src/pages/customization/default-theme/default-theme-ja.md +++ b/docs/src/pages/customization/default-theme/default-theme-ja.md @@ -12,4 +12,4 @@ Explore the default theme object: -テーマについてもっと知りたい場合は、[`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js)又は `createMuiTheme`に関連するものをインポートして使って下さい。 +テーマについてもっと知りたい場合は、[`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js)又は `createTheme`に関連するものをインポートして使って下さい。 diff --git a/docs/src/pages/customization/default-theme/default-theme-pt.md b/docs/src/pages/customization/default-theme/default-theme-pt.md index f4d81548e8bbbf..f72a511b9bd138 100644 --- a/docs/src/pages/customization/default-theme/default-theme-pt.md +++ b/docs/src/pages/customization/default-theme/default-theme-pt.md @@ -12,4 +12,4 @@ Explore o objeto de tema padrão: -Se você quiser aprender mais sobre como o tema é montado, dê uma olhada em [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), e as importações relacionadas que `createMuiTheme` usa. +Se você quiser aprender mais sobre como o tema é montado, dê uma olhada em [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), e as importações relacionadas que `createTheme` usa. diff --git a/docs/src/pages/customization/default-theme/default-theme-ru.md b/docs/src/pages/customization/default-theme/default-theme-ru.md index d7574759fcddf7..ac919e45644b88 100644 --- a/docs/src/pages/customization/default-theme/default-theme-ru.md +++ b/docs/src/pages/customization/default-theme/default-theme-ru.md @@ -12,4 +12,4 @@ Explore the default theme object: -Подробности о структуре темы изнутри можно посмотреть здесь [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), а также изучив зависимости, используемые `createMuiTheme`. +Подробности о структуре темы изнутри можно посмотреть здесь [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), а также изучив зависимости, используемые `createTheme`. diff --git a/docs/src/pages/customization/default-theme/default-theme-zh.md b/docs/src/pages/customization/default-theme/default-theme-zh.md index c9ff5dfc7521d6..f9754862dc7523 100644 --- a/docs/src/pages/customization/default-theme/default-theme-zh.md +++ b/docs/src/pages/customization/default-theme/default-theme-zh.md @@ -12,4 +12,4 @@ -如果你想了解更多有关主题是如何组合的信息，请看看 [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js) 和 如何用`createMuiTheme` 导入主题 +如果你想了解更多有关主题是如何组合的信息，请看看 [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js) 和 如何用`createTheme` 导入主题 diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md index 59138082e13a01..bc46ce32504398 100644 --- a/docs/src/pages/customization/default-theme/default-theme.md +++ b/docs/src/pages/customization/default-theme/default-theme.md @@ -14,5 +14,5 @@ Explore the default theme object: -If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createMuiTheme.js), -and the related imports which `createMuiTheme` uses. +If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/createTheme.js), +and the related imports which `createTheme` uses. diff --git a/docs/src/pages/customization/density/density-de.md b/docs/src/pages/customization/density/density-de.md index 70348e46b67706..cc5b0e49094c97 100644 --- a/docs/src/pages/customization/density/density-de.md +++ b/docs/src/pages/customization/density/density-de.md @@ -37,7 +37,7 @@ If you enable high density a custom theme is applied to the docs. This theme is The theme is configured with the following options: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-es.md b/docs/src/pages/customization/density/density-es.md index 4c0551b9bb2f02..7d59de255a0f29 100644 --- a/docs/src/pages/customization/density/density-es.md +++ b/docs/src/pages/customization/density/density-es.md @@ -37,7 +37,7 @@ If you enable high density a custom theme is applied to the docs. This theme is The theme is configured with the following options: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-fr.md b/docs/src/pages/customization/density/density-fr.md index 2a3ea331d7a613..e77669fc37db1e 100644 --- a/docs/src/pages/customization/density/density-fr.md +++ b/docs/src/pages/customization/density/density-fr.md @@ -37,7 +37,7 @@ If you enable high density a custom theme is applied to the docs. This theme is The theme is configured with the following options: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-ja.md b/docs/src/pages/customization/density/density-ja.md index 91760a97ccdbf8..b7d020c0560f97 100644 --- a/docs/src/pages/customization/density/density-ja.md +++ b/docs/src/pages/customization/density/density-ja.md @@ -37,7 +37,7 @@ This section explains how to apply density. Material design ガイドライン テーマは、次のオプションで構成されます。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-pt.md b/docs/src/pages/customization/density/density-pt.md index 0a2eed9d647c45..1ce0693f44bfe8 100644 --- a/docs/src/pages/customization/density/density-pt.md +++ b/docs/src/pages/customization/density/density-pt.md @@ -37,7 +37,7 @@ Se você ativar alta densidade, um tema personalizado será aplicado a documenta O tema é configurado com as seguintes opções: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-ru.md b/docs/src/pages/customization/density/density-ru.md index 21b91d1694f829..22456d21709afc 100644 --- a/docs/src/pages/customization/density/density-ru.md +++ b/docs/src/pages/customization/density/density-ru.md @@ -37,7 +37,7 @@ If you enable high density a custom theme is applied to the docs. This theme is The theme is configured with the following options: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density-zh.md b/docs/src/pages/customization/density/density-zh.md index d0e5828489d658..6e50fbbcfd6281 100644 --- a/docs/src/pages/customization/density/density-zh.md +++ b/docs/src/pages/customization/density/density-zh.md @@ -37,7 +37,7 @@ 主题配置有以下选项： ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { defaultProps: { diff --git a/docs/src/pages/customization/density/density.md b/docs/src/pages/customization/density/density.md index 6dabe3ec45e330..cfcedcc1543a96 100644 --- a/docs/src/pages/customization/density/density.md +++ b/docs/src/pages/customization/density/density.md @@ -45,7 +45,7 @@ for when not to apply density. The theme is configured with the following options: ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { defaultProps: { diff --git a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js index cf4a1f8afc06b5..f64d933ea2b4b0 100644 --- a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js +++ b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Slider from '@material-ui/core/Slider'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { green } from '@material-ui/core/colors'; import Switch from '@material-ui/core/Switch'; @@ -14,7 +14,7 @@ export default function DynamicThemeNesting() { const theme = React.useMemo(() => { if (success) { - return createMuiTheme({ + return createTheme({ palette: { primary: { light: green[300], @@ -24,7 +24,7 @@ export default function DynamicThemeNesting() { }, }); } - return createMuiTheme(); + return createTheme(); }, [success]); return ( diff --git a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx index 90917eb3f5a04b..8fc2e0b538377e 100644 --- a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx +++ b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Slider from '@material-ui/core/Slider'; -import { createMuiTheme, ThemeProvider, Theme } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider, Theme } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { green } from '@material-ui/core/colors'; import Switch from '@material-ui/core/Switch'; @@ -14,7 +14,7 @@ export default function DynamicThemeNesting() { const theme = React.useMemo(() => { if (success) { - return createMuiTheme({ + return createTheme({ palette: { primary: { light: green[300], @@ -24,7 +24,7 @@ export default function DynamicThemeNesting() { }, }); } - return createMuiTheme(); + return createTheme(); }, [success]); return ( diff --git a/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.js b/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.js index a13be303a66255..bca3a24e2027d2 100644 --- a/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.js +++ b/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.js @@ -1,8 +1,8 @@ import * as React from 'react'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiCssBaseline: { styleOverrides: ` diff --git a/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.tsx b/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.tsx index a13be303a66255..bca3a24e2027d2 100644 --- a/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.tsx +++ b/docs/src/pages/customization/how-to-customize/OverrideCssBaseline.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiCssBaseline: { styleOverrides: ` diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 63460bff31fb2f..6e691e1d40bf63 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -5,7 +5,7 @@ import { makeStyles, ThemeProvider, useTheme, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; const useStyles = makeStyles((theme) => ({ @@ -98,8 +98,8 @@ function Demo() { ); } -const lightTheme = createMuiTheme(); -const darkTheme = createMuiTheme({ +const lightTheme = createTheme(); +const darkTheme = createTheme({ palette: { // Switching the dark mode on is a single property value change. mode: 'dark', diff --git a/docs/src/pages/customization/palette/Palette.js b/docs/src/pages/customization/palette/Palette.js index 17d4cdead95e44..589b9430d3ead2 100644 --- a/docs/src/pages/customization/palette/Palette.js +++ b/docs/src/pages/customization/palette/Palette.js @@ -1,10 +1,10 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import { purple } from '@material-ui/core/colors'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // Purple and green play nicely together. diff --git a/docs/src/pages/customization/palette/Palette.tsx b/docs/src/pages/customization/palette/Palette.tsx index 17d4cdead95e44..589b9430d3ead2 100644 --- a/docs/src/pages/customization/palette/Palette.tsx +++ b/docs/src/pages/customization/palette/Palette.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import { purple } from '@material-ui/core/colors'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // Purple and green play nicely together. diff --git a/docs/src/pages/customization/palette/ToggleColorMode.js b/docs/src/pages/customization/palette/ToggleColorMode.js index 89c4f7b70b984a..72de7c83e62378 100644 --- a/docs/src/pages/customization/palette/ToggleColorMode.js +++ b/docs/src/pages/customization/palette/ToggleColorMode.js @@ -1,7 +1,7 @@ import * as React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Box from '@material-ui/core/Box'; -import { useTheme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { useTheme, ThemeProvider, createTheme } from '@material-ui/core/styles'; import Brightness4Icon from '@material-ui/icons/Brightness4'; import Brightness7Icon from '@material-ui/icons/Brightness7'; @@ -44,7 +44,7 @@ export default function ToggleColorMode() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode, }, diff --git a/docs/src/pages/customization/palette/ToggleColorMode.tsx b/docs/src/pages/customization/palette/ToggleColorMode.tsx index 92a9e55691c868..865741c05ac59b 100644 --- a/docs/src/pages/customization/palette/ToggleColorMode.tsx +++ b/docs/src/pages/customization/palette/ToggleColorMode.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Box from '@material-ui/core/Box'; -import { useTheme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { useTheme, ThemeProvider, createTheme } from '@material-ui/core/styles'; import Brightness4Icon from '@material-ui/icons/Brightness4'; import Brightness7Icon from '@material-ui/icons/Brightness7'; @@ -44,7 +44,7 @@ export default function ToggleColorMode() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode, }, diff --git a/docs/src/pages/customization/palette/palette-de.md b/docs/src/pages/customization/palette/palette-de.md index cd690825ed17d5..ea1af5af3ca2a9 100644 --- a/docs/src/pages/customization/palette/palette-de.md +++ b/docs/src/pages/customization/palette/palette-de.md @@ -52,10 +52,10 @@ interface PaletteColor { Die einfachste Möglichkeit, eine Absicht anzupassen, besteht darin, eine oder mehrere der angegebenen Farben zu importieren und auf eine Palettenabsicht anzuwenden: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ Wenn Sie mehr benutzerdefinierte Farben bereitstellen möchten, können Sie entweder ein eigenes Farbobjekt erstellen oder Farben für einige oder alle Schlüssel der Absichten direkt angeben: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -127,9 +127,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -146,7 +146,7 @@ If you are using TypeScript, you would also need to use [module augmentation](/g ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -178,7 +178,7 @@ Etwas Inspiration gefällig? The Material Design team has built an [palette conf Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting `mode: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -200,7 +200,7 @@ For instance, you can enable the dark mode automatically: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -208,7 +208,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-es.md b/docs/src/pages/customization/palette/palette-es.md index c986b83529f55a..84609a0b1e890a 100644 --- a/docs/src/pages/customization/palette/palette-es.md +++ b/docs/src/pages/customization/palette/palette-es.md @@ -52,10 +52,10 @@ interface PaletteColor { La forma más sencilla de personalizar un propósito de color es importar uno o más de los colores proporcionados y aplicarlos a una intención de paleta: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ Si desea proporcionar colores más personalizados, puede crear su propio objeto de color, o directamente proporciona colores a algunas o todas las claves del propósito de color: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -127,9 +127,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -148,7 +148,7 @@ If you are using TypeScript, you would also need to use [module augmentation](/g ```ts import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -156,7 +156,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, @@ -182,7 +182,7 @@ Need inspiration? The Material Design team has built an [palette configuration t Material-UI comes with two palette types, light (the default) and dark. Puedes convertir el tema a obscuro cambiando la configuración `mode: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -204,7 +204,7 @@ For instance, you can enable the dark mode automatically: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -212,7 +212,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-fr.md b/docs/src/pages/customization/palette/palette-fr.md index c83aaa88521611..9cad0b9c22bbe8 100644 --- a/docs/src/pages/customization/palette/palette-fr.md +++ b/docs/src/pages/customization/palette/palette-fr.md @@ -52,10 +52,10 @@ interface PaletteColor { The simplest way to customize an intention is to import one or more of the provided colors and apply them to a palette intention: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ If you wish to provide more customized colors, you can either create your own color object, or directly supply colors to some or all of the intention's keys: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -127,9 +127,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -146,7 +146,7 @@ If you are using TypeScript, you would also need to use [module augmentation](/g ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -178,7 +178,7 @@ Need inspiration? The Material Design team has built an [palette configuration t Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting `mode: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -200,7 +200,7 @@ For instance, you can enable the dark mode automatically: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -208,7 +208,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-ja.md b/docs/src/pages/customization/palette/palette-ja.md index 5205414f9b50c2..45981ad2069127 100644 --- a/docs/src/pages/customization/palette/palette-ja.md +++ b/docs/src/pages/customization/palette/palette-ja.md @@ -52,10 +52,10 @@ interface PaletteColor { 意図をカスタマイズする最も簡単な方法は、提供されている1つまたは複数のカラーをインポートすることです。 ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ よりカスタマイズされた色を提供する場合は、独自の色オブジェクト 作成するか、意図のキーの一部またはすべてに直接色を指定できます。 ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -121,9 +121,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -140,7 +140,7 @@ If you are using TypeScript, you would also need to use [module augmentation](/g ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -172,7 +172,7 @@ declare module "@material-ui/core/styles/createPalette" { Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting `mode: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -194,7 +194,7 @@ For instance, you can enable the dark mode automatically: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -202,7 +202,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-pt.md b/docs/src/pages/customization/palette/palette-pt.md index e78d70cc8f2d98..efecddde401e3c 100644 --- a/docs/src/pages/customization/palette/palette-pt.md +++ b/docs/src/pages/customization/palette/palette-pt.md @@ -52,10 +52,10 @@ interface PaletteColor { A maneira mais simples de customizar uma intenção é importar uma ou mais das cores fornecidas e aplicá-las a uma intenção da paleta: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ Se você deseja fornecer cores mais personalizadas, você pode criar seu próprio objeto de cor, ou fornecer cores diretamente para algumas ou todas as chaves da intenção: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: será calculada com base em palette.primary.main, @@ -121,9 +121,9 @@ Observe que "contrastThreshold" segue uma curva não linear. Você pode adicionar novas cores dentro e fora da paleta do tema da seguinte maneira: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -140,7 +140,7 @@ Se você estiver usando TypeScript, você também deverá usar a [extensão de m ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -172,7 +172,7 @@ Precisa de inspiração? A equipe do Material Design construiu uma [ferramenta d O Material-UI vem com dois tipos de paletas, claro (o padrão) e escuro. Você pode deixar o tema escuro definindo `mode: 'dark'`. Embora seja apenas uma alteração no valor de uma propriedade única, internamente ela modifica vários valores da paleta. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -194,7 +194,7 @@ Por exemplo, você pode ativar o modo escuro automaticamente: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -202,7 +202,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-ru.md b/docs/src/pages/customization/palette/palette-ru.md index 2282f1cd6ec1d8..e125ee2ec0abd3 100644 --- a/docs/src/pages/customization/palette/palette-ru.md +++ b/docs/src/pages/customization/palette/palette-ru.md @@ -52,10 +52,10 @@ interface PaletteColor { The simplest way to customize an intention is to import one or more of the provided colors and apply them to a palette intention: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ If you wish to provide more customized colors, you can either create your own color object, or directly supply colors to some or all of the intention's keys: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -127,9 +127,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -146,7 +146,7 @@ If you are using TypeScript, you would also need to use [module augmentation](/g ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -178,7 +178,7 @@ declare module "@material-ui/core/styles/createPalette" { Material-UI comes with two palette types, light (the default) and dark. Вы можете сделать тему темной, установив режим `mode: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -200,7 +200,7 @@ You can leverage this preference dynamically with the [useMediaQuery](/component ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -208,7 +208,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-zh.md b/docs/src/pages/customization/palette/palette-zh.md index 2d12ca60d1fbd6..b85fdb19fea0d0 100644 --- a/docs/src/pages/customization/palette/palette-zh.md +++ b/docs/src/pages/customization/palette/palette-zh.md @@ -52,10 +52,10 @@ interface PaletteColor { 自定义调色板的最简单方法是导入一个或多个提供的颜色： ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -67,9 +67,9 @@ const theme = createMuiTheme({ 如果你想要提供更多的自定义颜色，你可以创建你自己的调色板，或者直接为一些或者所有的 `theme.palette` 键提供颜色： ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: 这将从 palette.primary.main 中进行计算， @@ -123,9 +123,9 @@ type PaletteTonalOffset = 您可以在主题的调色板内外添加新的颜色，如下所示： ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -146,7 +146,7 @@ const theme = createMuiTheme({ ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color']; @@ -184,7 +184,7 @@ declare module '@material-ui/core/styles/createPalette' { 材质界面有两种调色板的类型，亮色（light）（默认值）和 暗色（dark）模式。 你可以通过设置 `mode: 'dark'` 来启用夜间模式。 虽然只是单一的数值变化，但在其内部却修改了多个调色板的数值。 ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, @@ -206,7 +206,7 @@ const darkTheme = createMuiTheme({ ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -214,7 +214,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index 936e31b61ffe04..a53f3d5a8f233d 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -55,10 +55,10 @@ The simplest way to customize a palette color is to import one or more of the pr and apply them: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import blue from '@material-ui/core/colors/blue'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: blue, }, @@ -71,9 +71,9 @@ If you wish to provide more customized colors, you can either create your own pa or directly supply colors to some or all of the `theme.palette` keys: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { // light: will be calculated from palette.primary.main, @@ -133,9 +133,9 @@ Note that "contrastThreshold" follows a non-linear curve. You can add new colors inside and outside the palette of the theme as follow: ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -194,14 +194,14 @@ Material-UI comes with two palette modes: light (the default) and dark. You can make the theme dark by setting `mode: 'dark'`. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { mode: 'dark', }, }); ``` -While it's only a single value change, the `createMuiTheme` helper modifies several palette values. +While it's only a single value change, the `createTheme` helper modifies several palette values. The colors modified by the palette mode are the following: {{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "hideToolbar": true}} @@ -224,7 +224,7 @@ For instance, you can enable the dark mode automatically: ```jsx import * as React from 'react'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; function App() { @@ -232,7 +232,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { mode: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/spacing/spacing-de.md b/docs/src/pages/customization/spacing/spacing-de.md index bec338ad925236..071ef3d71d19d8 100644 --- a/docs/src/pages/customization/spacing/spacing-de.md +++ b/docs/src/pages/customization/spacing/spacing-de.md @@ -5,7 +5,7 @@ Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ Sie können die Abstandstransformation ändern, indem Sie Folgendes angeben: - eine Zahl ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - eine Funktion ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (Bootstrap Strategie) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - eine Array ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-es.md b/docs/src/pages/customization/spacing/spacing-es.md index 564cb03698ef94..5649f5f916d560 100644 --- a/docs/src/pages/customization/spacing/spacing-es.md +++ b/docs/src/pages/customization/spacing/spacing-es.md @@ -5,7 +5,7 @@ Material-UI utiliza [un factor recomendado de escalado de 8px](https://material.io/design/layout/understanding-layout.html) por defecto. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ Puede cambiar la transformacin de espaciado proporcionando: - un número ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - una función ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - una lista ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-fr.md b/docs/src/pages/customization/spacing/spacing-fr.md index ab0cc0b86eb8a3..a55d0e62cc3f99 100644 --- a/docs/src/pages/customization/spacing/spacing-fr.md +++ b/docs/src/pages/customization/spacing/spacing-fr.md @@ -5,7 +5,7 @@ Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ You can change the spacing transformation by providing: - a number ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - a function ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - an array ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-ja.md b/docs/src/pages/customization/spacing/spacing-ja.md index 0f96a4b1c3c02f..34ccfb50f34448 100644 --- a/docs/src/pages/customization/spacing/spacing-ja.md +++ b/docs/src/pages/customization/spacing/spacing-ja.md @@ -5,7 +5,7 @@ Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ theme.spacing(2); // `${8 * 2}px` = '16px' - a number ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - a function ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - an array ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-pt.md b/docs/src/pages/customization/spacing/spacing-pt.md index 28d39579789901..aadec219c5ba3b 100644 --- a/docs/src/pages/customization/spacing/spacing-pt.md +++ b/docs/src/pages/customization/spacing/spacing-pt.md @@ -5,7 +5,7 @@ Material-UI usa [um fator de escala recomendado de 8px](https://material.io/design/layout/understanding-layout.html) por padrão. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ Você pode alterar a transformação do espaçamento fornecendo: - um número ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - uma função ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (estratégia do Bootstrap) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - uma matriz ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-ru.md b/docs/src/pages/customization/spacing/spacing-ru.md index f0d3443811635c..1896a042cfcaf4 100644 --- a/docs/src/pages/customization/spacing/spacing-ru.md +++ b/docs/src/pages/customization/spacing/spacing-ru.md @@ -5,7 +5,7 @@ Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ theme.spacing(2); // `${8 * 2}px` = '16px' - число ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - функция ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - массив ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing-zh.md b/docs/src/pages/customization/spacing/spacing-zh.md index fb44a6905113f6..c3cdf66eedf565 100644 --- a/docs/src/pages/customization/spacing/spacing-zh.md +++ b/docs/src/pages/customization/spacing/spacing-zh.md @@ -5,7 +5,7 @@ Material-UI 默认使用的是 [设计指南上建议的 8px 缩放系数](https://material.io/design/layout/understanding-layout.html)。 ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ theme.spacing(2); // `${8 * 2}px` = '16px' - 一个数字 ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - 一个函数 ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: (factor) => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - 一个数组 ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/spacing/spacing.md b/docs/src/pages/customization/spacing/spacing.md index 5c91f1096b23b4..e49448b9fc8a25 100644 --- a/docs/src/pages/customization/spacing/spacing.md +++ b/docs/src/pages/customization/spacing/spacing.md @@ -5,7 +5,7 @@ Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.spacing(2); // `${8 * 2}px` = '16px' ``` @@ -17,7 +17,7 @@ You can change the spacing transformation by providing: - a number ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2); // `${4 * 2}px` = '8px' - a function ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: (factor) => `${0.25 * factor}rem`, // (Bootstrap strategy) }); @@ -37,7 +37,7 @@ theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px - an array ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); diff --git a/docs/src/pages/customization/theme-components/DefaultProps.js b/docs/src/pages/customization/theme-components/DefaultProps.js index 71417a3545c56e..7927e21051cf60 100644 --- a/docs/src/pages/customization/theme-components/DefaultProps.js +++ b/docs/src/pages/customization/theme-components/DefaultProps.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/theme-components/DefaultProps.tsx b/docs/src/pages/customization/theme-components/DefaultProps.tsx index 71417a3545c56e..7927e21051cf60 100644 --- a/docs/src/pages/customization/theme-components/DefaultProps.tsx +++ b/docs/src/pages/customization/theme-components/DefaultProps.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/theme-components/GlobalCss.js b/docs/src/pages/customization/theme-components/GlobalCss.js index 4bfb9f0bd502da..6b4b89c77e1803 100644 --- a/docs/src/pages/customization/theme-components/GlobalCss.js +++ b/docs/src/pages/customization/theme-components/GlobalCss.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { // Style sheet name ⚛️ diff --git a/docs/src/pages/customization/theme-components/GlobalCss.tsx b/docs/src/pages/customization/theme-components/GlobalCss.tsx index 4bfb9f0bd502da..6b4b89c77e1803 100644 --- a/docs/src/pages/customization/theme-components/GlobalCss.tsx +++ b/docs/src/pages/customization/theme-components/GlobalCss.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { // Style sheet name ⚛️ diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverride.js b/docs/src/pages/customization/theme-components/GlobalThemeOverride.js index b51403253e690a..81c35d688c22ea 100644 --- a/docs/src/pages/customization/theme-components/GlobalThemeOverride.js +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverride.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { styleOverrides: { diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverride.tsx b/docs/src/pages/customization/theme-components/GlobalThemeOverride.tsx index b51403253e690a..81c35d688c22ea 100644 --- a/docs/src/pages/customization/theme-components/GlobalThemeOverride.tsx +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverride.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { styleOverrides: { diff --git a/docs/src/pages/customization/theme-components/GlobalThemeVariants.js b/docs/src/pages/customization/theme-components/GlobalThemeVariants.js index 0ea19162864166..e3989441eddc2e 100644 --- a/docs/src/pages/customization/theme-components/GlobalThemeVariants.js +++ b/docs/src/pages/customization/theme-components/GlobalThemeVariants.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles((theme) => ({ @@ -10,9 +10,9 @@ const useStyles = makeStyles((theme) => ({ }, })); -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ diff --git a/docs/src/pages/customization/theme-components/GlobalThemeVariants.tsx b/docs/src/pages/customization/theme-components/GlobalThemeVariants.tsx index 84df5729453b5c..3cff7a99f1d97c 100644 --- a/docs/src/pages/customization/theme-components/GlobalThemeVariants.tsx +++ b/docs/src/pages/customization/theme-components/GlobalThemeVariants.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, makeStyles, Theme, ThemeProvider, @@ -21,9 +21,9 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ diff --git a/docs/src/pages/customization/theme-components/ThemeVariables.js b/docs/src/pages/customization/theme-components/ThemeVariables.js index 559fb56f1a7c22..7f5a847caed21a 100644 --- a/docs/src/pages/customization/theme-components/ThemeVariables.js +++ b/docs/src/pages/customization/theme-components/ThemeVariables.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/ThemeVariables.tsx b/docs/src/pages/customization/theme-components/ThemeVariables.tsx index 559fb56f1a7c22..7f5a847caed21a 100644 --- a/docs/src/pages/customization/theme-components/ThemeVariables.tsx +++ b/docs/src/pages/customization/theme-components/ThemeVariables.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-de.md b/docs/src/pages/customization/theme-components/theme-components-de.md index 064ccf91978263..84dba847147afa 100644 --- a/docs/src/pages/customization/theme-components/theme-components-de.md +++ b/docs/src/pages/customization/theme-components/theme-components-de.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -57,7 +57,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -99,7 +99,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-es.md b/docs/src/pages/customization/theme-components/theme-components-es.md index 3f15c771cc58b3..a05038da7915c3 100644 --- a/docs/src/pages/customization/theme-components/theme-components-es.md +++ b/docs/src/pages/customization/theme-components/theme-components-es.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -62,7 +62,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -104,7 +104,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-fr.md b/docs/src/pages/customization/theme-components/theme-components-fr.md index 1fe895d75dd0b9..d333de3b157532 100644 --- a/docs/src/pages/customization/theme-components/theme-components-fr.md +++ b/docs/src/pages/customization/theme-components/theme-components-fr.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -57,7 +57,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -99,7 +99,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-ja.md b/docs/src/pages/customization/theme-components/theme-components-ja.md index 5c6e5c7e8f5b2d..a77867efd70bd6 100644 --- a/docs/src/pages/customization/theme-components/theme-components-ja.md +++ b/docs/src/pages/customization/theme-components/theme-components-ja.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -57,7 +57,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -99,7 +99,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-pt.md b/docs/src/pages/customization/theme-components/theme-components-pt.md index 4994438518da87..d581690544595f 100644 --- a/docs/src/pages/customization/theme-components/theme-components-pt.md +++ b/docs/src/pages/customization/theme-components/theme-components-pt.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -57,7 +57,7 @@ You can use the `variants` key in the theme's `components` section to add new va As definições são especificadas em um array, sob o nome do componente. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -99,7 +99,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-ru.md b/docs/src/pages/customization/theme-components/theme-components-ru.md index 57ea091dcf593f..40137ec643db49 100644 --- a/docs/src/pages/customization/theme-components/theme-components-ru.md +++ b/docs/src/pages/customization/theme-components/theme-components-ru.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ To override a lab component's styles with TypeScript, check [this section of the You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -57,7 +57,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -99,7 +99,7 @@ declare module '@material-ui/core/Button/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components-zh.md b/docs/src/pages/customization/theme-components/theme-components-zh.md index 263862b96f4a68..238a9cb437ab1d 100644 --- a/docs/src/pages/customization/theme-components/theme-components-zh.md +++ b/docs/src/pages/customization/theme-components/theme-components-zh.md @@ -7,7 +7,7 @@ 可以使用theme的 `styleOverrides` 属性来改变每一个在 DOM 中由 Material-UI 生成的样式。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -34,7 +34,7 @@ const theme = createMuiTheme({ You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. 下面示例就是指定`defaultProps`属性覆盖`components`下组件的默认属性。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -63,7 +63,7 @@ You can use the `variants` key in the theme's `components` section to add new va 在组件名称（如：MuiButton）下以数组形式定义组件变量。 数组中的每个变量都会对应一个CSS类添加到HTML``中。 For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -105,7 +105,7 @@ declare module '@material-ui/core/Button/Button' { 覆盖所有组件实例的另一种方式是调整 [theme configuration variables](/customization/theming/#theme-configuration-variables)。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theme-components/theme-components.md b/docs/src/pages/customization/theme-components/theme-components.md index 0d851b2900a8cb..156bb4edd31356 100644 --- a/docs/src/pages/customization/theme-components/theme-components.md +++ b/docs/src/pages/customization/theme-components/theme-components.md @@ -7,7 +7,7 @@ You can use the theme's `styleOverrides` key to potentially change every single style injected by Material-UI into the DOM. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButton: { @@ -35,7 +35,7 @@ You can change the default of every prop of a Material-UI component. A `defaultProps` key is exposed in the theme's `components` key for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component MuiButtonBase: { @@ -59,7 +59,7 @@ You can use the `variants` key in the theme's `components` section to add new va The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML ``. The order is important, so make sure that the styles that should win are specified last. ```js -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiButton: { variants: [ @@ -101,7 +101,7 @@ declare module '@material-ui/core/Button' { Another way to override the look of all component instances is to adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', diff --git a/docs/src/pages/customization/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js index 0aeb583fbee55e..6f1b2a33baec38 100644 --- a/docs/src/pages/customization/theming/CustomStyles.js +++ b/docs/src/pages/customization/theming/CustomStyles.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { - createMuiTheme, + createTheme, ThemeProvider, experimentalStyled as styled, } from '@material-ui/core/styles'; @@ -14,7 +14,7 @@ const CustomCheckbox = styled(Checkbox)(({ theme }) => ({ }, })); -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: orange[500], }, diff --git a/docs/src/pages/customization/theming/CustomStyles.tsx b/docs/src/pages/customization/theming/CustomStyles.tsx index 566db5851591eb..90ed21f1efb04e 100644 --- a/docs/src/pages/customization/theming/CustomStyles.tsx +++ b/docs/src/pages/customization/theming/CustomStyles.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { - createMuiTheme, + createTheme, ThemeProvider, experimentalStyled as styled, } from '@material-ui/core/styles'; @@ -13,7 +13,7 @@ declare module '@material-ui/core/styles' { danger: string; }; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { status?: { danger?: string; @@ -28,7 +28,7 @@ const CustomCheckbox = styled(Checkbox)(({ theme }) => ({ }, })); -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: orange[500], }, diff --git a/docs/src/pages/customization/theming/ThemeNesting.js b/docs/src/pages/customization/theming/ThemeNesting.js index 77feaa87e5d518..a9cd06c87443ed 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.js +++ b/docs/src/pages/customization/theming/ThemeNesting.js @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; -const outerTheme = createMuiTheme({ +const outerTheme = createTheme({ palette: { secondary: { main: orange[500], @@ -11,7 +11,7 @@ const outerTheme = createMuiTheme({ }, }); -const innerTheme = createMuiTheme({ +const innerTheme = createTheme({ palette: { secondary: { main: green[500], diff --git a/docs/src/pages/customization/theming/ThemeNesting.tsx b/docs/src/pages/customization/theming/ThemeNesting.tsx index 77feaa87e5d518..a9cd06c87443ed 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.tsx +++ b/docs/src/pages/customization/theming/ThemeNesting.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; -const outerTheme = createMuiTheme({ +const outerTheme = createTheme({ palette: { secondary: { main: orange[500], @@ -11,7 +11,7 @@ const outerTheme = createMuiTheme({ }, }); -const innerTheme = createMuiTheme({ +const innerTheme = createTheme({ palette: { secondary: { main: green[500], diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.js b/docs/src/pages/customization/theming/ThemeNestingExtend.js index 5d9e0d913d5b21..f361572f7ac7fa 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.js +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.js @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; -const outerTheme = createMuiTheme({ +const outerTheme = createTheme({ palette: { secondary: { main: orange[500], @@ -17,7 +17,7 @@ export default function ThemeNestingExtend() { - createMuiTheme({ + createTheme({ ...theme, palette: { ...theme.palette, diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx index 3e68591f46042e..2743437b9f0463 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, Theme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, Theme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; -const outerTheme = createMuiTheme({ +const outerTheme = createTheme({ palette: { secondary: { main: orange[500], @@ -17,7 +17,7 @@ export default function ThemeNestingExtend() { - createMuiTheme({ + createTheme({ ...theme, palette: { ...theme.palette, diff --git a/docs/src/pages/customization/theming/theming-de.md b/docs/src/pages/customization/theming/theming-de.md index 5d76c7c9805ad6..5da3d87a428140 100644 --- a/docs/src/pages/customization/theming/theming-de.md +++ b/docs/src/pages/customization/theming/theming-de.md @@ -69,7 +69,7 @@ Die Auswirkungen der Verschachtelung der `ThemeProviders` Komponente auf die Per ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Generieren Sie eine Themenbasis von den gegebenen Optionen. @@ -85,11 +85,11 @@ Generieren Sie eine Themenbasis von den gegebenen Optionen. #### Beispiele ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ Generieren Sie responsive Typografieeinstellungen basierend auf den erhaltenen O #### Beispiele ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-es.md b/docs/src/pages/customization/theming/theming-es.md index f7e7d6a33aab8d..c6d6cb416543f6 100644 --- a/docs/src/pages/customization/theming/theming-es.md +++ b/docs/src/pages/customization/theming/theming-es.md @@ -69,7 +69,7 @@ Las implicaciones de rendimiento de anidar el componente ` ThemeProvider ` está ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Generar un tema en base a las opciones recibidas. @@ -85,11 +85,11 @@ Generar un tema en base a las opciones recibidas. #### Ejemplos ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ Generate responsive typography settings based on the options received. #### Ejemplos ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-fr.md b/docs/src/pages/customization/theming/theming-fr.md index 47f87d428bee50..6a796916a339d9 100644 --- a/docs/src/pages/customization/theming/theming-fr.md +++ b/docs/src/pages/customization/theming/theming-fr.md @@ -69,7 +69,7 @@ The performance implications of nesting the `ThemeProvider` component are linked ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Générer un thème basé sur les options reçues. @@ -85,11 +85,11 @@ Générer un thème basé sur les options reçues. #### Exemples ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ Generate responsive typography settings based on the options received. #### Exemples ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-ja.md b/docs/src/pages/customization/theming/theming-ja.md index 3dbc007daee228..89f9f2881a1d0b 100644 --- a/docs/src/pages/customization/theming/theming-ja.md +++ b/docs/src/pages/customization/theming/theming-ja.md @@ -69,7 +69,7 @@ Otherwise you'll encounter `Error: Function component cannot be given refs`. See ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` 受け取ったオプションに基づいてテーマを生成します。 @@ -85,11 +85,11 @@ Otherwise you'll encounter `Error: Function component cannot be given refs`. See #### 例 ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ const theme = createMuiTheme({ #### 例 ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-pt.md b/docs/src/pages/customization/theming/theming-pt.md index 145cce5007cf57..bf4a52bfe642d9 100644 --- a/docs/src/pages/customization/theming/theming-pt.md +++ b/docs/src/pages/customization/theming/theming-pt.md @@ -69,7 +69,7 @@ As implicações de desempenho de aninhamento do componente `ThemeProvider`, est ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Gere uma base de temas sobre as opções recebidas. @@ -85,11 +85,11 @@ Gere uma base de temas sobre as opções recebidas. #### Exemplos ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ Gera configurações de tipografia responsivas com base nas opções recebidas. #### Exemplos ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-ru.md b/docs/src/pages/customization/theming/theming-ru.md index 00cb7f230f0eb9..e3d9cc30d52575 100644 --- a/docs/src/pages/customization/theming/theming-ru.md +++ b/docs/src/pages/customization/theming/theming-ru.md @@ -69,7 +69,7 @@ The performance implications of nesting the `ThemeProvider` component are linked ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Generate a theme base on the options received. @@ -85,11 +85,11 @@ Generate a theme base on the options received. #### Примеры ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ Generate responsive typography settings based on the options received. #### Примеры ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming-zh.md b/docs/src/pages/customization/theming/theming-zh.md index 1d403af9e870cf..8e3b5669a2d2a3 100644 --- a/docs/src/pages/customization/theming/theming-zh.md +++ b/docs/src/pages/customization/theming/theming-zh.md @@ -69,7 +69,7 @@ ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` 通过接收的选项生成一个主题基础。 @@ -85,11 +85,11 @@ #### 例子 ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -122,9 +122,9 @@ const theme = createMuiTheme({ #### 例子 ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/theming/theming.md b/docs/src/pages/customization/theming/theming.md index 4a748fe95dbe84..50cf7d800eea52 100644 --- a/docs/src/pages/customization/theming/theming.md +++ b/docs/src/pages/customization/theming/theming.md @@ -37,7 +37,7 @@ When using Material-UI's theme with the [styling solution](/styles/basics/) or [ For instance: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: orange[500], }, @@ -53,7 +53,7 @@ declare module '@material-ui/core/styles' { danger: string; }; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { status?: { danger?: string; @@ -101,7 +101,7 @@ The main point to understand is that the injected CSS is cached with the followi ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` Generate a theme base on the options received. @@ -117,11 +117,11 @@ Generate a theme base on the options received. #### Examples ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: purple[500], @@ -157,9 +157,9 @@ Generate responsive typography settings based on the options received. #### Examples ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` diff --git a/docs/src/pages/customization/transitions/TransitionHover.js b/docs/src/pages/customization/transitions/TransitionHover.js index d2e5ac78fc2a90..434e403477c6d4 100644 --- a/docs/src/pages/customization/transitions/TransitionHover.js +++ b/docs/src/pages/customization/transitions/TransitionHover.js @@ -2,13 +2,13 @@ import * as React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; import { - createMuiTheme, + createTheme, ThemeProvider as MuiThemeProvider, } from '@material-ui/core/styles'; import { deepPurple } from '@material-ui/core/colors'; import Avatar from '@material-ui/core/Avatar'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: deepPurple[500], diff --git a/docs/src/pages/customization/transitions/TransitionHover.tsx b/docs/src/pages/customization/transitions/TransitionHover.tsx index d2e5ac78fc2a90..434e403477c6d4 100644 --- a/docs/src/pages/customization/transitions/TransitionHover.tsx +++ b/docs/src/pages/customization/transitions/TransitionHover.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; import { - createMuiTheme, + createTheme, ThemeProvider as MuiThemeProvider, } from '@material-ui/core/styles'; import { deepPurple } from '@material-ui/core/colors'; import Avatar from '@material-ui/core/Avatar'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: deepPurple[500], diff --git a/docs/src/pages/customization/transitions/transitions-de.md b/docs/src/pages/customization/transitions/transitions-de.md index 4632abb08f31d4..acf3fdc87db78e 100644 --- a/docs/src/pages/customization/transitions/transitions-de.md +++ b/docs/src/pages/customization/transitions/transitions-de.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/transitions/transitions-es.md b/docs/src/pages/customization/transitions/transitions-es.md index 680d03efcbe408..b2a49025dad0c1 100644 --- a/docs/src/pages/customization/transitions/transitions-es.md +++ b/docs/src/pages/customization/transitions/transitions-es.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/transitions/transitions-fr.md b/docs/src/pages/customization/transitions/transitions-fr.md index f85990ad01c3f8..3a9d779c034854 100644 --- a/docs/src/pages/customization/transitions/transitions-fr.md +++ b/docs/src/pages/customization/transitions/transitions-fr.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/transitions/transitions-ja.md b/docs/src/pages/customization/transitions/transitions-ja.md index a9d3678c8036a1..ca8ae55df9b41c 100644 --- a/docs/src/pages/customization/transitions/transitions-ja.md +++ b/docs/src/pages/customization/transitions/transitions-ja.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/transitions/transitions-pt.md b/docs/src/pages/customization/transitions/transitions-pt.md index 313bbd733fbd7d..0105871fe4fc29 100644 --- a/docs/src/pages/customization/transitions/transitions-pt.md +++ b/docs/src/pages/customization/transitions/transitions-pt.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); Você pode alterar alguns ou todos os valores de duração, ou fornecer valores próprios (para usar com o utilitário `create()`). Este exemplo mostra todos os valores padrão (em milissegundos), mas você só precisa fornecer as chaves que deseja alterar ou adicionar. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ Você pode alterar alguns ou todos os valores de atenuação, ou fornecer valores próprios, fornecendo um valor customizado de CSS transition-timing-function. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // Esta é a curva de atenuação mais comum. diff --git a/docs/src/pages/customization/transitions/transitions-ru.md b/docs/src/pages/customization/transitions/transitions-ru.md index e43bb8098729bf..7d60c5b1cec0cd 100644 --- a/docs/src/pages/customization/transitions/transitions-ru.md +++ b/docs/src/pages/customization/transitions/transitions-ru.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/transitions/transitions-zh.md b/docs/src/pages/customization/transitions/transitions-zh.md index 42e531bd5552d1..9756c97e0c3869 100644 --- a/docs/src/pages/customization/transitions/transitions-zh.md +++ b/docs/src/pages/customization/transitions/transitions-zh.md @@ -45,7 +45,7 @@ theme.transitions.create(['background-color', 'transform']); 你可以更改其中部分或全部的时长，或者提供你想要的时长（供 `create()` 助手使用）。 此示例显示了所有默认值（以毫秒为单位），但你只需要提供你想要更改或添加的键。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -69,7 +69,7 @@ const theme = createMuiTheme({ 你可以通过提供一个自定义的 CSS transition-timing-function 值来改变部分或全部的缓动值，或者提供你自己的缓动值。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // 这是最常见的缓和曲线（easing curve）。 diff --git a/docs/src/pages/customization/transitions/transitions.md b/docs/src/pages/customization/transitions/transitions.md index 6c9d2b666d32bc..af0b56f53ebabf 100644 --- a/docs/src/pages/customization/transitions/transitions.md +++ b/docs/src/pages/customization/transitions/transitions.md @@ -44,7 +44,7 @@ theme.transitions.create(['background-color', 'transform']); You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { duration: { shortest: 150, @@ -68,7 +68,7 @@ const theme = createMuiTheme({ You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value. ```js -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { easing: { // This is the most common easing curve. diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js index e6e123f7ab2d5f..a37d951d130eb9 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx index e6e123f7ab2d5f..a37d951d130eb9 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', diff --git a/docs/src/pages/customization/typography/FontSizeTheme.js b/docs/src/pages/customization/typography/FontSizeTheme.js index f50e573a1867c9..980638fcbea13d 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.js +++ b/docs/src/pages/customization/typography/FontSizeTheme.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what the font-size on the html element is. htmlFontSize: 10, diff --git a/docs/src/pages/customization/typography/FontSizeTheme.tsx b/docs/src/pages/customization/typography/FontSizeTheme.tsx index f50e573a1867c9..980638fcbea13d 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.tsx +++ b/docs/src/pages/customization/typography/FontSizeTheme.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what the font-size on the html element is. htmlFontSize: 10, diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.js b/docs/src/pages/customization/typography/ResponsiveFontSizes.js index 076069e7f6ba77..ce11767187f0df 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js @@ -1,12 +1,12 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, responsiveFontSizes, ThemeProvider, } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); export default function ResponsiveFontSizes() { diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx index 076069e7f6ba77..ce11767187f0df 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, responsiveFontSizes, ThemeProvider, } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); export default function ResponsiveFontSizes() { diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js index d7c43b8a1ab6f0..9381e120377bfb 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js @@ -5,7 +5,7 @@ import * as React from 'react'; import { convertLength } from '@material-ui/core/styles/cssUtils'; import { makeStyles, - createMuiTheme, + createTheme, responsiveFontSizes, } from '@material-ui/core/styles'; import { @@ -19,7 +19,7 @@ import { ResponsiveContainer, } from 'recharts'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); const colors = [ diff --git a/docs/src/pages/customization/typography/TypographyCustomVariant.js b/docs/src/pages/customization/typography/TypographyCustomVariant.js index b75d27ec190527..40935506086978 100644 --- a/docs/src/pages/customization/typography/TypographyCustomVariant.js +++ b/docs/src/pages/customization/typography/TypographyCustomVariant.js @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // @ts-ignore poster: { diff --git a/docs/src/pages/customization/typography/TypographyCustomVariant.tsx b/docs/src/pages/customization/typography/TypographyCustomVariant.tsx index b75d27ec190527..40935506086978 100644 --- a/docs/src/pages/customization/typography/TypographyCustomVariant.tsx +++ b/docs/src/pages/customization/typography/TypographyCustomVariant.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // @ts-ignore poster: { diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js index dcf0c0d15aca60..d53eef62c55d8e 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.js +++ b/docs/src/pages/customization/typography/TypographyVariants.js @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx index dcf0c0d15aca60..d53eef62c55d8e 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.tsx +++ b/docs/src/pages/customization/typography/TypographyVariants.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, diff --git a/docs/src/pages/customization/typography/typography-de.md b/docs/src/pages/customization/typography/typography-de.md index 120c9c33ded45a..42c2a8675b9874 100644 --- a/docs/src/pages/customization/typography/typography-de.md +++ b/docs/src/pages/customization/typography/typography-de.md @@ -9,7 +9,7 @@ You can change the font family with the `theme.typography.fontFamily` property. For instance, this demo uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI verwendet `rem` Einheiten für die Schriftgröße. The browser `` Elements ä An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Informiere die Material-UI über die Schriftgröße des HTML-Elements. htmlFontSize: 10, @@ -185,7 +185,7 @@ The typography object comes with [13 variants](/components/typography/#component Each of these variants can be customized individually: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-es.md b/docs/src/pages/customization/typography/typography-es.md index c3006521e137fa..678584d4b6419a 100644 --- a/docs/src/pages/customization/typography/typography-es.md +++ b/docs/src/pages/customization/typography/typography-es.md @@ -9,7 +9,7 @@ Puedes Cambiar la familia de fuente con la propiedad `theme.typography.fontFamil Por ejemplo, en este caso se utiliza la fuente del sistema en vez de la fuente por defecto, Roboto: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Luego, usted podrá lo necesario en el cambiar el tema para usar la nueva fuente. En aras de definir de forma global como una cara de fuente, el componente [`CssBaseline`](/components/css-baseline/) podra ser usado (o cualquier otra solucion CSS de su eleccion). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI usa unidades `rem` para el tamaño de fuente. El navegador `` Para cambiar el tamaño de fuente de Material-UI Puedes proveer una propiedad llamada `fontSize` . The default value is `14px`. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may be appropriate. @@ -103,7 +103,7 @@ The computed font size by the browser follows this mathematical equation: Las propiedades [variantes](#variants) de `theme.typography.*` se mapean directamente al CSS generado. puedes usar [media queries](/customization/breakpoints/#api) dentro de ellos: ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ Para automatizar el setup, puedes usar el ayudante [`responsiveFontSizes()`](/cu Puedes ver esto en acción en ejemplo debajo. Ajusta el tamaño de la ventana de tu navegador y observa como el tamaño de la fuente cambia a medida que el ancho sobrepasa los diferentes [breakpoints](/customization/breakpoints/): ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ You might want to change the `` element default font size. For instance, w La propiedad `theme.typography.htmlFontSize` puede ser utilizada en estos casos, le informa a Material-UI cual es el tamaño de la fuente en el elemento ``. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what's the font-size on the html element is. htmlFontSize: 10, @@ -185,7 +185,7 @@ The typography object comes with [13 variants](/components/typography/#component Each of these variants can be customized individually: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React. CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React. CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-fr.md b/docs/src/pages/customization/typography/typography-fr.md index 50650a83538434..e5399c2ef35b15 100644 --- a/docs/src/pages/customization/typography/typography-fr.md +++ b/docs/src/pages/customization/typography/typography-fr.md @@ -9,7 +9,7 @@ You can change the font family with the `theme.typography.fontFamily` property. For instance, this demo uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI uses `rem` units for the font size. The browser `` element def To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may be appropriate. @@ -103,7 +103,7 @@ The computed font size by the browser follows this mathematical equation: The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them: ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/): ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ You might want to change the `` element default font size. For instance, w An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what's the font-size on the html element is. htmlFontSize: 10, @@ -185,7 +185,7 @@ The typography object comes with [13 variants](/components/typography/#component Each of these variants can be customized individually: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-ja.md b/docs/src/pages/customization/typography/typography-ja.md index 015f1b25c1734e..02972109119173 100644 --- a/docs/src/pages/customization/typography/typography-ja.md +++ b/docs/src/pages/customization/typography/typography-ja.md @@ -9,7 +9,7 @@ You can change the font family with the `theme.typography.fontFamily` property. For instance, this demo uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ An `htmlFontSize` theme property is provided for this use case, which tells Mate An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may be appropriate. @@ -103,7 +103,7 @@ const theme = createMuiTheme({ [media queries](/customization/breakpoints/#api) を使用できます： Typographyバリアント型プロパティは、生成されたCSSに直接マップされます。 Typographyバリアント型プロパティは、生成されたCSSに直接マップされます。 [media queries](/customization/breakpoints/#api) を使用できます： Typographyバリアント型プロパティは、生成されたCSSに直接マップされます。 [media queries](/customization/breakpoints/#api) を使用できます： ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ theme.typography.h3 = { 以下の例で実際にこれを見ることができます。 ブラウザのウィンドウサイズを調整し、幅が異なる[ブレークポイント](/customization/breakpoints/)を横切るときにフォントサイズがどのように変化するかを確認します。 ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ An `htmlFontSize` theme property is provided for this use case, which tells Mate An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what's the font-size on the html element is. htmlFontSize: 10, @@ -185,7 +185,7 @@ The typography object comes with [13 variants](/components/typography/#component これらのバリアントは各々個別にカスタマイズ可能です。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-pt.md b/docs/src/pages/customization/typography/typography-pt.md index 528aedded846d9..0ba125c9d6381c 100644 --- a/docs/src/pages/customization/typography/typography-pt.md +++ b/docs/src/pages/customization/typography/typography-pt.md @@ -9,7 +9,7 @@ Você pode alterar a família de fontes com a propriedade `theme.typography.font Por exemplo, esta demonstração usa a fonte do sistema em vez da fonte padrão Roboto: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Em seguida, você precisa alterar o tema para usar essa nova fonte. Para definir globalmente Raleway como uma fonte, o componente [`CssBaseline`](/components/css-baseline/) pode ser usado (ou qualquer outra solução CSS de sua escolha). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI usa a unidade `rem` para o tamanho da fonte. O tamanho da fonte padr Para alterar o tamanho da fonte do Material-UI, você pode definir a propriedade `fontSize`. O valor padrão é `14px`. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Em chinês e japonês os caracteres são geralmente maiores, // então um tamanho de letra menor pode ser apropriado. @@ -103,7 +103,7 @@ O tamanho da fonte computada pelo navegador segue esta equação matemática: As propriedades de variações de tipografia são mapeadas diretamente para o CSS gerado. Você pode usar [consultas de mídia](/customization/breakpoints/#api) dentro delas: ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ Para automatizar estas configurações, você pode usar a função auxiliar [`re Você pode ver isso em ação no exemplo abaixo. Ajuste o tamanho da janela do navegador e observe como o tamanho da fonte muda à medida que a largura cruza os diferentes [pontos de quebra](/customization/breakpoints/): ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ Você pode querer alterar o tamanho da fonte padrão do elemento ``. Por e Uma propriedade de tema `htmlFontSize` é fornecida para este caso de uso, que informa ao Material-UI qual é o tamanho da fonte no elemento ``. Isso é usado para ajustar o valor `rem`, para que o tamanho da fonte calculado sempre corresponda à especificação. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Diz ao Material-UI qual é o font-size no elemento html. htmlFontSize: 10, @@ -185,7 +185,7 @@ O objeto de tipografia vem com [13 variantes](/components/typography/#component) Cada uma dessas variantes pode ser customizada individualmente: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-ru.md b/docs/src/pages/customization/typography/typography-ru.md index dff4f37905559b..0e6d561787c2c4 100644 --- a/docs/src/pages/customization/typography/typography-ru.md +++ b/docs/src/pages/customization/typography/typography-ru.md @@ -9,7 +9,7 @@ You can change the font family with the `theme.typography.fontFamily` property. For instance, this demo uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI uses `rem` units for the font size. The browser `` element def To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may be appropriate. @@ -103,7 +103,7 @@ The computed font size by the browser follows this mathematical equation: The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them: ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/): ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ You might want to change the `` element default font size. For instance, w An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what's the font-size on the html element is. htmlFontSize: 10, @@ -185,7 +185,7 @@ The typography object comes with [13 variants](/components/typography/#component Each of these variants can be customized individually: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography-zh.md b/docs/src/pages/customization/typography/typography-zh.md index f440d9a36a0d8a..c68ba1cf3fd8bd 100644 --- a/docs/src/pages/customization/typography/typography-zh.md +++ b/docs/src/pages/customization/typography/typography-zh.md @@ -9,7 +9,7 @@ 例如，这个例子使用是系统字体而不是默认的 Roboto 字体： ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -54,7 +54,7 @@ const raleway = { 接下来，您需要做的是修改主题，来使用这一个新的字体。 如果想在全局定义 Raleway 作为一个字体，您可以使用 [`CssBaseline`](/components/css-baseline/) 组件（或者你也可以选择你想要的任意其他 CSS 方案)。 ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -83,7 +83,7 @@ Material-UI 使用 `rem` 单元来定义字体的大小。 浏览器 `` 若想更改 Material-UI 的字体大小，您可以提供一个 `fontSize ` 属性。 它的默认值为 `14px`。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // 中文字符和日文字符通常比较大， // 所以选用一个略小的 fontsize 会比较合适。 @@ -103,7 +103,7 @@ const theme = createMuiTheme({ `theme.typography.*` [variant](#variants) 属性会直接映射到生成的 CSS。 您可以在当中使用 [媒体查询（media queries）](/customization/breakpoints/#api)： ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -125,9 +125,9 @@ theme.typography.h3 = { 您可以在下面的示例中看到这个操作。 请尝试调整浏览器的窗口大小，您可以注意到当切换到不同的 [breakpoints](/customization/breakpoints/) 设置的宽度，字体的大小也随之改变。 ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -146,7 +146,7 @@ theme = responsiveFontSizes(theme); `theme.typography.htmlFontSize` 属性是为这个用例提供的，它将会告诉 Material-UI `` 元素的字体大小是多少。 这可以用于调整 `rem` 值，如此一来计算后的 font-size 总是与规范相符合。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // 告知 Material-UI 此 html 元素的具体字体大小。 htmlFontSize: 10, @@ -185,7 +185,7 @@ _您需要在此页面的 html 元素上应用上述的 CSS 才能看到以下 每个变体都可以被单独地定制： ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -209,7 +209,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -234,7 +234,7 @@ declare module '@material-ui/core/styles/createTypography' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md index c98e2d7a6ad24d..ab408eeb3f3a00 100644 --- a/docs/src/pages/customization/typography/typography.md +++ b/docs/src/pages/customization/typography/typography.md @@ -9,7 +9,7 @@ You can change the font family with the `theme.typography.fontFamily` property. For instance, this example uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -45,7 +45,7 @@ In order to globally define Raleway as a font face, the [`CssBaseline`](/compone ```jsx import RalewayWoff2 from './fonts/Raleway-Regular.woff2'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: 'Raleway, Arial', }, @@ -94,7 +94,7 @@ To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may be appropriate. @@ -115,7 +115,7 @@ The `theme.typography.*` [variant](#variants) properties map directly to the gen You can use [media queries](/customization/breakpoints/#api) inside them: ```js -const theme = createMuiTheme(); +const theme = createTheme(); theme.typography.h3 = { fontSize: '1.2rem', @@ -137,9 +137,9 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization You can see this in action in the example below. Adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/): ```js -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); ``` @@ -160,7 +160,7 @@ which tells Material-UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // Tell Material-UI what's the font-size on the html element is. htmlFontSize: 10, @@ -199,7 +199,7 @@ The typography object comes with [13 variants](/components/typography/#component Each of these variants can be customized individually: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, @@ -223,7 +223,7 @@ In addition to using the default typography variants, you can add custom ones, o **Step 1. Update the theme's typography object** ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { poster: { color: 'red', @@ -248,7 +248,7 @@ declare module '@material-ui/core/styles' { poster: React.CSSProperties; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface TypographyVariantsOptions { poster?: React.CSSProperties; } diff --git a/docs/src/pages/getting-started/faq/faq-de.md b/docs/src/pages/getting-started/faq/faq-de.md index 5ce7ba3ef9aca7..d82d14427b178c 100644 --- a/docs/src/pages/getting-started/faq/faq-de.md +++ b/docs/src/pages/getting-started/faq/faq-de.md @@ -44,9 +44,9 @@ Scrolling is blocked as soon as a modal is opened. This prevents interacting wit Der Ripple-Effekt kommt ausschließlich von der `BaseButton` Komponente. Sie können den Ripple-Effekt global deaktivieren, indem Sie in Ihrem Theme folgendes angeben: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { @@ -62,9 +62,9 @@ const theme = createMuiTheme({ Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // Jetzt haven wir überall `transition: none;` create: () => 'none', @@ -77,9 +77,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-es.md b/docs/src/pages/getting-started/faq/faq-es.md index 5bf5189c848189..ef0812f37733e4 100644 --- a/docs/src/pages/getting-started/faq/faq-es.md +++ b/docs/src/pages/getting-started/faq/faq-es.md @@ -65,9 +65,9 @@ module.exports = { Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // Então temos `transition: none;` everywhere create: () => 'none', @@ -80,9 +80,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-fr.md b/docs/src/pages/getting-started/faq/faq-fr.md index f170fd33bbe3dd..1d5be45f29d9df 100644 --- a/docs/src/pages/getting-started/faq/faq-fr.md +++ b/docs/src/pages/getting-started/faq/faq-fr.md @@ -44,9 +44,9 @@ Scrolling is blocked as soon as a modal is opened. This prevents interacting wit The ripple effect is exclusively coming from the `BaseButton` component. You can disable the ripple effect globally by providing the following in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { @@ -62,9 +62,9 @@ const theme = createMuiTheme({ Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // So we have `transition: none;` everywhere create: () => 'none', @@ -77,9 +77,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-ja.md b/docs/src/pages/getting-started/faq/faq-ja.md index f5147d74bbdf4d..e60646d6f3fc4d 100644 --- a/docs/src/pages/getting-started/faq/faq-ja.md +++ b/docs/src/pages/getting-started/faq/faq-ja.md @@ -44,9 +44,9 @@ Scrolling is blocked as soon as a modal is opened. This prevents interacting wit Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { @@ -62,9 +62,9 @@ const theme = createMuiTheme({ Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // So we have `transition: none;` everywhere create: () => 'none', @@ -77,9 +77,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-pt.md b/docs/src/pages/getting-started/faq/faq-pt.md index 4007b3e2106c16..b2d37084c90a4b 100644 --- a/docs/src/pages/getting-started/faq/faq-pt.md +++ b/docs/src/pages/getting-started/faq/faq-pt.md @@ -44,9 +44,9 @@ A rolagem é bloqueada assim que um modal é aberto. Isto impede a interação c O efeito cascata é exclusivamente proveniente do componente `BaseButton`. Você pode desativar o efeito cascata globalmente aplicando as seguintes configurações no seu tema: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Nome do componente ⚛️ MuiButtonBase: { @@ -62,9 +62,9 @@ const theme = createMuiTheme({ Material-UI usa o mesmo auxiliar de tema para criar todas as transições. Portanto, você pode desativar todas as transições substituindo o auxiliar no seu tema: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // Então temos `transition: none;` em todo lugar create: () => 'none', @@ -77,9 +77,9 @@ Pode ser útil desabilitar transições durante testes visuais ou para melhorar Você pode ir além, desabilitando todas as transições e efeitos de animações: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-ru.md b/docs/src/pages/getting-started/faq/faq-ru.md index c0f52aa5ada401..1830c1d3ec943e 100644 --- a/docs/src/pages/getting-started/faq/faq-ru.md +++ b/docs/src/pages/getting-started/faq/faq-ru.md @@ -44,9 +44,9 @@ Scrolling is blocked as soon as a modal is opened. This prevents interacting wit The ripple effect is exclusively coming from the `BaseButton` component. You can disable the ripple effect globally by providing the following in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { @@ -62,9 +62,9 @@ const theme = createMuiTheme({ Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // Então temos `transition: none;` everywhere create: () => 'none', @@ -77,9 +77,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-zh.md b/docs/src/pages/getting-started/faq/faq-zh.md index 7b25693631f247..b5a18c8892104a 100644 --- a/docs/src/pages/getting-started/faq/faq-zh.md +++ b/docs/src/pages/getting-started/faq/faq-zh.md @@ -44,9 +44,9 @@ 涟漪效果完全来自 `BaseButton` 组件。 您可以通过在您的主题中提供以下内容，来全局地禁用涟漪效果： ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiButtonBase: { @@ -64,9 +64,9 @@ const theme = createMuiTheme({ Material-UI 使用相同的主题助手来创建其所有的过渡动画。 因此，您可以通过覆盖主题助手来禁用所有的过渡： ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // 这样就设定了全局的 `transition: none;` create: () => 'none', @@ -79,9 +79,9 @@ const theme = createMuiTheme({ 您可以更进一步地禁用所有的过渡和动画效果。 ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 600f8faee1d9b6..c3508200c8bd6a 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -52,9 +52,9 @@ The ripple effect is exclusively coming from the `BaseButton` component. You can disable the ripple effect globally by providing the following in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiButtonBase: { @@ -73,9 +73,9 @@ Material-UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ transitions: { // So we have `transition: none;` everywhere create: () => 'none', @@ -88,9 +88,9 @@ It can be useful to disable transitions during visual testing or to improve perf You can go one step further by disabling all transitions and animations effects: ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ components: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index aa4cc0bbe1aa89..95211452c0d69a 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, experimentalStyled as styled, ThemeProvider, darken, @@ -8,7 +8,7 @@ import { import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#20b2aa', diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index aa4cc0bbe1aa89..95211452c0d69a 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, experimentalStyled as styled, ThemeProvider, darken, @@ -8,7 +8,7 @@ import { import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#20b2aa', diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index a511f0946ea928..66cb8b765c84cf 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -3,7 +3,7 @@ import TablePagination from '@material-ui/core/TablePagination'; import Autocomplete from '@material-ui/core/Autocomplete'; import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import * as locales from '@material-ui/core/locale'; export default function Locales() { @@ -12,7 +12,7 @@ export default function Locales() { return ( createMuiTheme(outerTheme, locales[locale])} + theme={(outerTheme) => createTheme(outerTheme, locales[locale])} > createMuiTheme(outerTheme, locales[locale])} + theme={(outerTheme) => createTheme(outerTheme, locales[locale])} > }); diff --git a/docs/src/pages/guides/right-to-left/Direction.tsx b/docs/src/pages/guides/right-to-left/Direction.tsx index cea5e3d538358d..1a104a40a039b7 100644 --- a/docs/src/pages/guides/right-to-left/Direction.tsx +++ b/docs/src/pages/guides/right-to-left/Direction.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', // Both here and }); diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js index 7b9826f4ea0861..becfbcd6a87a8f 100644 --- a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import styled from '@emotion/styled'; import { ThemeProvider } from '@emotion/react'; @@ -18,7 +18,7 @@ const UnaffectedText = styled('div')` text-align: left; `; -const theme = createMuiTheme(); +const theme = createTheme(); export default function RtlOptOut() { return ( diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx index 48132e606f0059..730986aa67122e 100644 --- a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createTheme, Theme } from '@material-ui/core/styles'; import styled from '@emotion/styled'; import { ThemeProvider } from '@emotion/react'; @@ -18,7 +18,7 @@ const UnaffectedText = styled('div')` text-align: left; `; -const theme = createMuiTheme(); +const theme = createTheme(); export default function RtlOptOut() { return ( diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js index 0bc86659df727c..b1f47ff24cfeec 100644 --- a/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import styled from '@emotion/styled'; import { ThemeProvider } from '@emotion/react'; @@ -18,7 +18,7 @@ const UnaffectedText = styled('div')({ textAlign: 'right', }); -const theme = createMuiTheme(); +const theme = createTheme(); export default function RtlOptOut() { return ( diff --git a/docs/src/pages/guides/right-to-left/right-to-left-de.md b/docs/src/pages/guides/right-to-left/right-to-left-de.md index bba8d2da4a10f0..d608508f78998d 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-de.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-de.md @@ -17,7 +17,7 @@ Stellen Sie sicher, dass das `dir` Attribut in body gesetzt wird, sonst werden n Legen Sie die Richtung in Ihrem benutzerdefinierten Theme fest: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-es.md b/docs/src/pages/guides/right-to-left/right-to-left-es.md index cf414e626271fa..e31cde7ae99c71 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-es.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-es.md @@ -17,7 +17,7 @@ Asegúrese de que el atributo `dir` está establecido en el body, de lo contrari Establece la dirección en su tema personalizado: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-fr.md b/docs/src/pages/guides/right-to-left/right-to-left-fr.md index 338dec3ccef042..d793383503a9e5 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-fr.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-fr.md @@ -17,7 +17,7 @@ Make sure the `dir` attribute is set on the body, otherwise native components wi Set the direction in your custom theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-ja.md b/docs/src/pages/guides/right-to-left/right-to-left-ja.md index 8ad431ff2cdf46..5096ba732d429b 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-ja.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-ja.md @@ -17,7 +17,7 @@ Make sure the `dir` attribute is set on the body, otherwise native components wi Set the direction in your custom theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-pt.md b/docs/src/pages/guides/right-to-left/right-to-left-pt.md index ec0d3c02c1d16a..e5acaa07de054e 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-pt.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-pt.md @@ -17,7 +17,7 @@ Certifique-se de que o atributo `dir` é definido no corpo (body), caso contrár Defina a direção no seu tema customizado: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-ru.md b/docs/src/pages/guides/right-to-left/right-to-left-ru.md index 29960b4125b5ae..0fa4b8d9451785 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-ru.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-ru.md @@ -17,7 +17,7 @@ Make sure the `dir` attribute is set on the body, otherwise native components wi Set the direction in your custom theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left-zh.md b/docs/src/pages/guides/right-to-left/right-to-left-zh.md index 60c5a98fdce643..7bdde6a706ae03 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left-zh.md +++ b/docs/src/pages/guides/right-to-left/right-to-left-zh.md @@ -17,7 +17,7 @@ 在您自定义的主题中设置方向： ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md index 2570bd404ffe35..abf797f076e55b 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left.md +++ b/docs/src/pages/guides/right-to-left/right-to-left.md @@ -31,7 +31,7 @@ This can be helpful for creating components to toggle language settings in the l Set the direction in your custom theme: ```js -const theme = createMuiTheme({ +const theme = createTheme({ direction: 'rtl', }); ``` diff --git a/docs/src/pages/guides/routing/LinkRouterWithTheme.js b/docs/src/pages/guides/routing/LinkRouterWithTheme.js index d7b3744ea902e6..5ab3b695d018c1 100644 --- a/docs/src/pages/guides/routing/LinkRouterWithTheme.js +++ b/docs/src/pages/guides/routing/LinkRouterWithTheme.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { MemoryRouter as Router } from 'react-router'; import { Link as RouterLink } from 'react-router-dom'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Stack from '@material-ui/core/Stack'; import Link from '@material-ui/core/Link'; @@ -19,7 +19,7 @@ LinkBehavior.propTypes = { }; const themeSetter = (outerTheme) => - createMuiTheme(outerTheme, { + createTheme(outerTheme, { components: { MuiLink: { defaultProps: { diff --git a/docs/src/pages/guides/routing/LinkRouterWithTheme.tsx b/docs/src/pages/guides/routing/LinkRouterWithTheme.tsx index 2d4acb69f30fc8..ac86ab57a97039 100644 --- a/docs/src/pages/guides/routing/LinkRouterWithTheme.tsx +++ b/docs/src/pages/guides/routing/LinkRouterWithTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { MemoryRouter as Router } from 'react-router'; import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom'; -import { Theme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { Theme, ThemeProvider, createTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Stack from '@material-ui/core/Stack'; import Link from '@material-ui/core/Link'; @@ -16,7 +16,7 @@ const LinkBehavior = React.forwardRef< }); const themeSetter = (outerTheme: Theme) => - createMuiTheme(outerTheme, { + createTheme(outerTheme, { components: { MuiLink: { defaultProps: { diff --git a/docs/src/pages/guides/routing/routing.md b/docs/src/pages/guides/routing/routing.md index 8ebf099b14e697..af57296caf27de 100644 --- a/docs/src/pages/guides/routing/routing.md +++ b/docs/src/pages/guides/routing/routing.md @@ -33,7 +33,7 @@ const LinkBehavior = React.forwardRef< return ; }); -const theme = createMuiTheme({ +const theme = createTheme({ components: { MuiLink: { defaultProps: { diff --git a/docs/src/pages/guides/server-rendering/server-rendering-de.md b/docs/src/pages/guides/server-rendering/server-rendering-de.md index 7e52f2670cf71f..f885391849d98e 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-de.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-de.md @@ -26,11 +26,11 @@ Create a theme that will be shared between the client and the server: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Erstellen Sie eine Theme-Instanz. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-es.md b/docs/src/pages/guides/server-rendering/server-rendering-es.md index a2db3667fbc6eb..bfd54056714365 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-es.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-es.md @@ -26,11 +26,11 @@ Create a theme that will be shared between the client and the server: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-fr.md b/docs/src/pages/guides/server-rendering/server-rendering-fr.md index e1d868a7b829b2..7232aafd3dd5cc 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-fr.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-fr.md @@ -26,11 +26,11 @@ Create a theme that will be shared between the client and the server: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-ja.md b/docs/src/pages/guides/server-rendering/server-rendering-ja.md index 8c518ef23fb4f2..a6759552ae6176 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-ja.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-ja.md @@ -26,11 +26,11 @@ Material-UIは、サーバーでのレンダリングの制約を考慮してゼ `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-pt.md b/docs/src/pages/guides/server-rendering/server-rendering-pt.md index b4ac93f86a20fa..067c08374c0638 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-pt.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-pt.md @@ -26,11 +26,11 @@ Crie um tema que será compartilhado entre o cliente e o servidor: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Cria a instância do tema. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-ru.md b/docs/src/pages/guides/server-rendering/server-rendering-ru.md index 27e54d8c128926..5ddb8cbdca306f 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-ru.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-ru.md @@ -26,11 +26,11 @@ Create a theme that will be shared between the client and the server: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering-zh.md b/docs/src/pages/guides/server-rendering/server-rendering-zh.md index fef00ba4083ffa..e3f05dd9a11273 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering-zh.md +++ b/docs/src/pages/guides/server-rendering/server-rendering-zh.md @@ -26,11 +26,11 @@ Material-UI 最初设计受到了在服务器端渲染的约束，但是您可 `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // 创建一个主题的实例。 -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index f3ed2fad2847b7..31c1b21e0d6d99 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -29,11 +29,11 @@ Create a theme that will be shared between the client and the server: `theme.js` ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/red'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/docs/src/pages/guides/typescript/typescript-de.md b/docs/src/pages/guides/typescript/typescript-de.md index 520f6f01292b93..7c45ed2a29fe89 100644 --- a/docs/src/pages/guides/typescript/typescript-de.md +++ b/docs/src/pages/guides/typescript/typescript-de.md @@ -218,17 +218,17 @@ Beim Hinzufügen benutzerdefinierter Eigenschaften zum `Theme` können Sie es we Im folgenden Beispiel wird eine `appDrawer` Eigenschaft hinzugefügt, welche in das von `material-ui` exportierte Theme eingefügt wird: ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -243,10 +243,10 @@ Und eine benutzerdefinierte Theme Generierung mit zusätzlichen Standardoptionen **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-es.md b/docs/src/pages/guides/typescript/typescript-es.md index ec0e667a409048..3ccacd46b7622f 100644 --- a/docs/src/pages/guides/typescript/typescript-es.md +++ b/docs/src/pages/guides/typescript/typescript-es.md @@ -216,17 +216,17 @@ When adding custom properties to the `Theme`, you may continue to use it in a st The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`: ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -241,10 +241,10 @@ And a custom theme factory with additional defaulted options: **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-fr.md b/docs/src/pages/guides/typescript/typescript-fr.md index 25f3516777fa0e..6d2561f355098d 100644 --- a/docs/src/pages/guides/typescript/typescript-fr.md +++ b/docs/src/pages/guides/typescript/typescript-fr.md @@ -216,17 +216,17 @@ When adding custom properties to the `Theme`, you may continue to use it in a st The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`: ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -241,10 +241,10 @@ And a custom theme factory with additional defaulted options: **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-ja.md b/docs/src/pages/guides/typescript/typescript-ja.md index 8396be9ea67f68..dd99d5673e0388 100644 --- a/docs/src/pages/guides/typescript/typescript-ja.md +++ b/docs/src/pages/guides/typescript/typescript-ja.md @@ -216,17 +216,17 @@ const DecoratedClass = withStyles(styles)( 次の例では、`material-ui`によって書き出されたプロパティに合成される`appDrawer`プロパティを追加します。 ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -241,10 +241,10 @@ declare module '@material-ui/core/styles/createMuiTheme' { **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-pt.md b/docs/src/pages/guides/typescript/typescript-pt.md index 60cb7fda524be7..5f1b36e39ef46f 100644 --- a/docs/src/pages/guides/typescript/typescript-pt.md +++ b/docs/src/pages/guides/typescript/typescript-pt.md @@ -216,17 +216,17 @@ Ao adicionar propriedades customizadas ao `Theme`, você pode continuar a utiliz O exemplo a seguir adiciona uma propriedade `appDrawer` que é mesclada na que foi exportada pelo `material-ui`: ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // permitir configuração usando `createMuiTheme` + // permitir configuração usando `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -241,10 +241,10 @@ E uma fábrica customizada de temas com opções padrão adicionais: **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-ru.md b/docs/src/pages/guides/typescript/typescript-ru.md index f81ad0d006fafc..c599abddea8bd7 100644 --- a/docs/src/pages/guides/typescript/typescript-ru.md +++ b/docs/src/pages/guides/typescript/typescript-ru.md @@ -216,17 +216,17 @@ When adding custom properties to the `Theme`, you may continue to use it in a st The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`: ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -241,10 +241,10 @@ And a custom theme factory with additional defaulted options: **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript-zh.md b/docs/src/pages/guides/typescript/typescript-zh.md index 06d7cf945cdfd4..08b73f01f4b334 100644 --- a/docs/src/pages/guides/typescript/typescript-zh.md +++ b/docs/src/pages/guides/typescript/typescript-zh.md @@ -231,17 +231,17 @@ const DecoratedClass = withStyles(styles)( 以下示例添加了一个 `appDrawer` 属性，并将其合并到由 `material-ui` 提供的属性中： ```ts -import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { appDrawer: { width: React.CSSProperties['width'] breakpoint: Breakpoint } } - // 使用 `createMuiTheme` 来配置 + // 使用 `createTheme` 来配置 interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width'] @@ -256,10 +256,10 @@ declare module '@material-ui/core/styles/createMuiTheme' { **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index 09394738071589..3ba2ef1c477b29 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -244,7 +244,7 @@ declare module '@material-ui/core/styles' { breakpoint: Breakpoint; }; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { appDrawer?: { width?: React.CSSProperties['width']; @@ -259,10 +259,10 @@ And a custom theme factory with additional defaulted options: **./styles/createMyTheme**: ```ts -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createTheme, ThemeOptions } from '@material-ui/core/styles'; export default function createMyTheme(options: ThemeOptions) { - return createMuiTheme({ + return createTheme({ appDrawer: { width: 225, breakpoint: 'lg', diff --git a/docs/src/pages/premium-themes/onepirate/modules/theme.js b/docs/src/pages/premium-themes/onepirate/modules/theme.js index 34b58a06cc10cb..ad0c1bf2f2f06a 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/theme.js +++ b/docs/src/pages/premium-themes/onepirate/modules/theme.js @@ -1,7 +1,7 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { green, grey, red } from '@material-ui/core/colors'; -const rawTheme = createMuiTheme({ +const rawTheme = createTheme({ palette: { primary: { light: '#69696a', diff --git a/docs/src/pages/premium-themes/onepirate/modules/theme.ts b/docs/src/pages/premium-themes/onepirate/modules/theme.ts index 34b58a06cc10cb..ad0c1bf2f2f06a 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/theme.ts +++ b/docs/src/pages/premium-themes/onepirate/modules/theme.ts @@ -1,7 +1,7 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { green, grey, red } from '@material-ui/core/colors'; -const rawTheme = createMuiTheme({ +const rawTheme = createTheme({ palette: { primary: { light: '#69696a', diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index b158fb8b1563d6..20abad39219beb 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { createMuiTheme, ThemeProvider, withStyles } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider, withStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Hidden from '@material-ui/core/Hidden'; import Typography from '@material-ui/core/Typography'; @@ -21,7 +21,7 @@ function Copyright() { ); } -let theme = createMuiTheme({ +let theme = createTheme({ palette: { primary: { light: '#63ccff', diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index 35d7cd7febc342..9149e391487244 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - createMuiTheme, + createTheme, createStyles, ThemeProvider, withStyles, @@ -26,7 +26,7 @@ function Copyright() { ); } -let theme = createMuiTheme({ +let theme = createTheme({ palette: { primary: { light: '#63ccff', diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md index 5133de68c9c9dc..f3b7bfdc6d1dda 100644 --- a/docs/src/pages/styles/advanced/advanced-de.md +++ b/docs/src/pages/styles/advanced/advanced-de.md @@ -6,7 +6,7 @@ Sie können das äußere Theme erweitern, indem Sie eine Funktion bereitstellen: Das innere Theme ** überschreibt** das äußere Theme. -> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. +> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md index 94303fbe850898..19fc48be993f14 100644 --- a/docs/src/pages/styles/advanced/advanced-es.md +++ b/docs/src/pages/styles/advanced/advanced-es.md @@ -6,7 +6,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> Este ejemplo crea un objeto de tema para componentes construidos a medida. Si pretende utilizar algunos de los componentes de Material-UI, necesita proporcionar una estructura de tema más rica utilizando el método `createMuiTheme()`. Dirígete a la sección [temática](/customization/theming/) para aprender cómo construir tu tema personalizado de Material-UI. +> Este ejemplo crea un objeto de tema para componentes construidos a medida. Si pretende utilizar algunos de los componentes de Material-UI, necesita proporcionar una estructura de tema más rica utilizando el método `createTheme()`. Dirígete a la sección [temática](/customization/theming/) para aprender cómo construir tu tema personalizado de Material-UI. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md index 1942f4f250e5c9..e2aef138dcaa33 100644 --- a/docs/src/pages/styles/advanced/advanced-fr.md +++ b/docs/src/pages/styles/advanced/advanced-fr.md @@ -6,7 +6,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. +> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md index bc9eff3729e6da..16b1710450b50e 100644 --- a/docs/src/pages/styles/advanced/advanced-ja.md +++ b/docs/src/pages/styles/advanced/advanced-ja.md @@ -6,7 +6,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. カスタムMaterial-UIテーマを構築する方法については、 [テーマセクション](/customization/theming/) を参照してください。 +> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createTheme()` method. カスタムMaterial-UIテーマを構築する方法については、 [テーマセクション](/customization/theming/) を参照してください。 ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md index 1f3d4a6f9f7053..b41651f2e3ef63 100644 --- a/docs/src/pages/styles/advanced/advanced-pt.md +++ b/docs/src/pages/styles/advanced/advanced-pt.md @@ -6,7 +6,7 @@ Adicione um `ThemeProvider` para o nível superior de sua aplicação para passar um tema pela árvore de componentes do React. Dessa maneira, você poderá acessar o objeto de tema em funções de estilo. -> Este exemplo cria um objeto de tema para componentes customizados. Se você pretende usar alguns dos componentes do Material-UI, você precisa fornecer uma estrutura de tema mais rica usando o método `createMuiTheme()`. Vá até a [seção de temas](/customization/theming/) para aprender como construir seu tema customizado do Material-UI. +> Este exemplo cria um objeto de tema para componentes customizados. Se você pretende usar alguns dos componentes do Material-UI, você precisa fornecer uma estrutura de tema mais rica usando o método `createTheme()`. Vá até a [seção de temas](/customization/theming/) para aprender como construir seu tema customizado do Material-UI. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md index 01ae93c7f79515..d5c1d21b4974f5 100644 --- a/docs/src/pages/styles/advanced/advanced-ru.md +++ b/docs/src/pages/styles/advanced/advanced-ru.md @@ -6,7 +6,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> Этот пример создает объект темы для пользовательских компонентов. Если вы собираетесь использовать какие-либо компоненты Material-UI, вам необходимо использовать метод `createMuiTheme()` который обеспечивает более обширную структуру темы. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. +> Этот пример создает объект темы для пользовательских компонентов. Если вы собираетесь использовать какие-либо компоненты Material-UI, вам необходимо использовать метод `createTheme()` который обеспечивает более обширную структуру темы. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md index a7b1e088b1489f..ed7be92327eb50 100644 --- a/docs/src/pages/styles/advanced/advanced-zh.md +++ b/docs/src/pages/styles/advanced/advanced-zh.md @@ -6,7 +6,7 @@ 若您想将主题传递到 React 组件树，请将添加 `ThemeProvider` 包装到应用程序的顶层。 然后，您可以在样式函数中访问主题对象。 -> 此示例为自定义组件创建了一个主题对象（theme object）。 如果你想要使用 Material-UI 的部分组件，那么则需要通过使用 `createMuiTheme()` 方法来提供一个更丰富的主题结构。 请前往 [theming 部分](/customization/theming/) 学习如何构建自己的 Material-UI 主题。 +> 此示例为自定义组件创建了一个主题对象（theme object）。 如果你想要使用 Material-UI 的部分组件，那么则需要通过使用 `createTheme()` 方法来提供一个更丰富的主题结构。 请前往 [theming 部分](/customization/theming/) 学习如何构建自己的 Material-UI 主题。 ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md index 4e58cc08ed7ae1..3127c4f33eb110 100644 --- a/docs/src/pages/styles/advanced/advanced.md +++ b/docs/src/pages/styles/advanced/advanced.md @@ -6,7 +6,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. Head to the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. +> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme. ```jsx import { ThemeProvider } from '@material-ui/core/styles'; diff --git a/docs/src/pages/system/advanced/StyleFunctionSxDemo.js b/docs/src/pages/system/advanced/StyleFunctionSxDemo.js index b77bbc3a065d8c..11b5cd36bc97c3 100644 --- a/docs/src/pages/system/advanced/StyleFunctionSxDemo.js +++ b/docs/src/pages/system/advanced/StyleFunctionSxDemo.js @@ -2,9 +2,9 @@ import * as React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import { unstable_styleFunctionSx } from '@material-ui/system'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme(); +const theme = createTheme(); const Div = styled('div')(unstable_styleFunctionSx); diff --git a/docs/src/pages/system/advanced/StyleFunctionSxDemo.tsx b/docs/src/pages/system/advanced/StyleFunctionSxDemo.tsx index 6a8007bdc1df15..233e5de1f26456 100644 --- a/docs/src/pages/system/advanced/StyleFunctionSxDemo.tsx +++ b/docs/src/pages/system/advanced/StyleFunctionSxDemo.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import styled, { InterpolationFunction, ThemeProvider } from 'styled-components'; import { unstable_styleFunctionSx, SxProps } from '@material-ui/system'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; interface DivProps { sx?: SxProps; } -const theme = createMuiTheme(); +const theme = createTheme(); const Div = styled('div')( unstable_styleFunctionSx as InterpolationFunction, diff --git a/docs/src/pages/system/basics/basics-de.md b/docs/src/pages/system/basics/basics-de.md index cedfc15d097354..2d8c83569f8a12 100644 --- a/docs/src/pages/system/basics/basics-de.md +++ b/docs/src/pages/system/basics/basics-de.md @@ -287,9 +287,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-es.md b/docs/src/pages/system/basics/basics-es.md index 739e3d3d83bc7d..189cfd477c1b66 100644 --- a/docs/src/pages/system/basics/basics-es.md +++ b/docs/src/pages/system/basics/basics-es.md @@ -287,9 +287,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-fr.md b/docs/src/pages/system/basics/basics-fr.md index 2a62a266ebe252..fb5f49e66bcfc8 100644 --- a/docs/src/pages/system/basics/basics-fr.md +++ b/docs/src/pages/system/basics/basics-fr.md @@ -287,9 +287,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-ja.md b/docs/src/pages/system/basics/basics-ja.md index 40ecf2ea1b13e5..747d59e06cfbdb 100644 --- a/docs/src/pages/system/basics/basics-ja.md +++ b/docs/src/pages/system/basics/basics-ja.md @@ -287,9 +287,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-pt.md b/docs/src/pages/system/basics/basics-pt.md index c1de2ebaee2899..d2ff235a18a4cd 100644 --- a/docs/src/pages/system/basics/basics-pt.md +++ b/docs/src/pages/system/basics/basics-pt.md @@ -287,9 +287,9 @@ Você também pode especificar seus próprios pontos de quebras customizados, e ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-ru.md b/docs/src/pages/system/basics/basics-ru.md index 4052b30a7db4b4..d0c1521d272064 100644 --- a/docs/src/pages/system/basics/basics-ru.md +++ b/docs/src/pages/system/basics/basics-ru.md @@ -287,9 +287,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics-zh.md b/docs/src/pages/system/basics/basics-zh.md index 4c0c1f58cf98b0..d505aa76d74a2a 100644 --- a/docs/src/pages/system/basics/basics-zh.md +++ b/docs/src/pages/system/basics/basics-zh.md @@ -288,9 +288,9 @@ CSS 属性中有大量的速记语法。 这些语法在之后的文档中都有 ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index 4b4c0d2fe446d5..ed4deb6ae26920 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -296,9 +296,9 @@ You can also specify your own custom breakpoints, and use them as keys when defi ```jsx import * as React from 'react'; import Box from '@material-ui/core/Box'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, diff --git a/examples/cdn/index.html b/examples/cdn/index.html index b92f3526b1aa78..713553b19a784e 100644 --- a/examples/cdn/index.html +++ b/examples/cdn/index.html @@ -22,7 +22,7 @@ ThemeProvider, Typography, Container, - createMuiTheme, + createTheme, Box, SvgIcon, Link, @@ -30,7 +30,7 @@ } = MaterialUI; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/create-react-app-with-typescript/src/theme.tsx b/examples/create-react-app-with-typescript/src/theme.tsx index 405e84b54e976a..d466905615fd8b 100644 --- a/examples/create-react-app-with-typescript/src/theme.tsx +++ b/examples/create-react-app-with-typescript/src/theme.tsx @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { red } from '@material-ui/core/colors'; // A custom theme for this app -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/create-react-app/src/theme.js b/examples/create-react-app/src/theme.js index b9718a185ec676..d79f614584add3 100644 --- a/examples/create-react-app/src/theme.js +++ b/examples/create-react-app/src/theme.js @@ -1,8 +1,8 @@ import { red } from '@material-ui/core/colors'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; // A custom theme for this app -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/gatsby-theme/src/gatsby-theme-material-ui-top-layout/theme.js b/examples/gatsby-theme/src/gatsby-theme-material-ui-top-layout/theme.js index b9718a185ec676..d79f614584add3 100644 --- a/examples/gatsby-theme/src/gatsby-theme-material-ui-top-layout/theme.js +++ b/examples/gatsby-theme/src/gatsby-theme-material-ui-top-layout/theme.js @@ -1,8 +1,8 @@ import { red } from '@material-ui/core/colors'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; // A custom theme for this app -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/gatsby/src/theme.js b/examples/gatsby/src/theme.js index b9718a185ec676..d79f614584add3 100644 --- a/examples/gatsby/src/theme.js +++ b/examples/gatsby/src/theme.js @@ -1,8 +1,8 @@ import { red } from '@material-ui/core/colors'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; // A custom theme for this app -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/nextjs-with-typescript/src/theme.tsx b/examples/nextjs-with-typescript/src/theme.tsx index 21af17c750d59c..84755f8d9f6633 100644 --- a/examples/nextjs-with-typescript/src/theme.tsx +++ b/examples/nextjs-with-typescript/src/theme.tsx @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { red } from '@material-ui/core/colors'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/nextjs/src/theme.js b/examples/nextjs/src/theme.js index 21af17c750d59c..84755f8d9f6633 100644 --- a/examples/nextjs/src/theme.js +++ b/examples/nextjs/src/theme.js @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { red } from '@material-ui/core/colors'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/preact/src/theme.js b/examples/preact/src/theme.js index 21af17c750d59c..84755f8d9f6633 100644 --- a/examples/preact/src/theme.js +++ b/examples/preact/src/theme.js @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { red } from '@material-ui/core/colors'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/examples/ssr/theme.js b/examples/ssr/theme.js index 21af17c750d59c..84755f8d9f6633 100644 --- a/examples/ssr/theme.js +++ b/examples/ssr/theme.js @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { red } from '@material-ui/core/colors'; // Create a theme instance. -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#556cd6', diff --git a/framer/Material-UI.framerfx/code/ThemeProvider.tsx b/framer/Material-UI.framerfx/code/ThemeProvider.tsx index 5a82d693bd03ad..f8985281dbc9f6 100644 --- a/framer/Material-UI.framerfx/code/ThemeProvider.tsx +++ b/framer/Material-UI.framerfx/code/ThemeProvider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { addPropertyControls, ControlType } from 'framer'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'; import { parseColor } from './utils'; interface Props { @@ -27,7 +27,7 @@ export function Theme(props: Props): JSX.Element { ...other } = props; - const theme = createMuiTheme({ + const theme = createTheme({ palette: { mode: paletteMode, primary: { main: parseColor(primary) }, diff --git a/packages/material-ui-codemod/README.md b/packages/material-ui-codemod/README.md index 0fccbe01504b62..e608be625b3c42 100644 --- a/packages/material-ui-codemod/README.md +++ b/packages/material-ui-codemod/README.md @@ -115,8 +115,8 @@ Converts all `@material-ui/core` imports more than 1 level deep to the optimal f ```diff -import withStyles from '@material-ui/core/styles/withStyles'; --import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; -+import { withStyles, createMuiTheme } from '@material-ui/core/styles'; +-import createTheme from '@material-ui/core/styles/createTheme'; ++import { withStyles, createTheme } from '@material-ui/core/styles'; ``` ```sh diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js index dbbb56ac5deb79..5d9db54b25835c 100644 --- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js +++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/actual.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { withTheme } from '@material-ui/core/styles'; import withStyles from '@material-ui/core/styles/withStyles'; -import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; +import createTheme from '@material-ui/core/styles/createTheme'; import MenuItem from '@material-ui/core/MenuItem'; import Tab from '@material-ui/core/Tab'; import MuiTabs from '@material-ui/core/Tabs'; diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js index 81ad0371c5c548..0b12aad9c71408 100644 --- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js +++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.test/expected.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { withTheme, withStyles, createMuiTheme } from '@material-ui/core/styles'; +import { withTheme, withStyles, createTheme } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import Tab from '@material-ui/core/Tab'; import MuiTabs from '@material-ui/core/Tabs'; diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx index 875acdbf3dc80a..aaaa9742502a50 100644 --- a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx +++ b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { act, describeConformance, screen, fireEvent } from 'test/utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField, { TextFieldProps } from '@material-ui/core/TextField'; import { DateRange } from '@material-ui/lab/DateRangePicker'; import DesktopDateRangePicker from '@material-ui/lab/DesktopDateRangePicker'; @@ -341,7 +341,7 @@ describe('', () => { // TODO: remove once we use describeConformanceV5. it("respect theme's defaultProps", () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiDesktopDateRangePicker: { defaultProps: { startText: 'Início', endText: 'Fim' }, diff --git a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx index 8cea3c25593b2b..7705ef95dedbff 100644 --- a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx +++ b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import TextField from '@material-ui/core/TextField'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { fireEvent, screen } from 'test/utils'; import StaticDatePicker from '@material-ui/lab/StaticDatePicker'; import { @@ -54,7 +54,7 @@ describe('', () => { // TODO: remove once we use describeConformanceV5 it("respect theme's defaultProps", () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiStaticDatePicker: { defaultProps: { toolbarTitle: 'Select A Date' } } }, }); diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index 85b33b6fb9423e..28c38bdb329c36 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { SheetsRegistry } from 'jss'; import { act } from 'react-dom/test-utils'; import { createMount } from 'test/utils'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import createGenerateClassName from '../createGenerateClassName'; import makeStyles from './makeStyles'; import useTheme from '../useTheme'; @@ -224,7 +224,7 @@ describe('makeStyles', () => { }; const wrapper = mount( - + { wrapper.update(); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-1' }); - wrapper.setProps({ theme: createMuiTheme() }); + wrapper.setProps({ theme: createTheme() }); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-2' }); @@ -257,7 +257,7 @@ describe('makeStyles', () => { }; const wrapper = mount( - + { expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' }); - wrapper.setProps({ theme: createMuiTheme({ foo: 'bar' }) }); + wrapper.setProps({ theme: createTheme({ foo: 'bar' }) }); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' }); }); @@ -295,7 +295,7 @@ describe('makeStyles', () => { mount( { const Component = withStyles({}, { name: 'Test' })(ComponentInternal); it('returns variants classes if props do match', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { Test: { variants: [ @@ -44,7 +44,7 @@ describe('useThemeVariants', () => { }); it('does not return variants classes if props do not match', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { Test: { variants: [ @@ -68,7 +68,7 @@ describe('useThemeVariants', () => { }); it('matches correctly multiple props', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { Test: { variants: [ @@ -113,7 +113,7 @@ describe('useThemeVariants', () => { return
; }); - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiButton: { variants: [ diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js index f837fc8be5925a..d9671f6e9e55c9 100644 --- a/packages/material-ui-styles/src/withStyles/withStyles.test.js +++ b/packages/material-ui-styles/src/withStyles/withStyles.test.js @@ -6,7 +6,7 @@ import { SheetsRegistry } from 'jss'; import Input from '@material-ui/core/Input'; import { createClientRender, screen } from 'test/utils'; import { isMuiElement } from '@material-ui/core/utils'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import StylesProvider from '../StylesProvider'; import createGenerateClassName from '../createGenerateClassName'; import ThemeProvider from '../ThemeProvider'; @@ -93,7 +93,7 @@ describe('withStyles', () => { const sheetsRegistry = new SheetsRegistry(); const { setProps, unmount } = render( - + @@ -108,7 +108,7 @@ describe('withStyles', () => { expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'Empty-root-1' }); - setProps({ theme: createMuiTheme() }); + setProps({ theme: createTheme() }); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'Empty-root-2' }); @@ -142,7 +142,7 @@ describe('withStyles', () => { const { container } = render( { const { container } = render( { const sheetsRegistry = new SheetsRegistry(); const { setProps } = render( - + @@ -204,7 +204,7 @@ describe('withStyles', () => { expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' }); - setProps({ theme: createMuiTheme({ foo: 'bar' }) }); + setProps({ theme: createTheme({ foo: 'bar' }) }); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' }); @@ -218,7 +218,7 @@ describe('withStyles', () => { render( { render( ', () => { ); it('should be customizable in the theme', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiAutocomplete: { styleOverrides: { diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index d58b9b3529506a..71dc7d10b87599 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SystemProps, SxProps } from '@material-ui/system'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; -import { Theme } from '../styles/createMuiTheme'; +import { Theme } from '../styles/createTheme'; export interface BoxTypeMap

{ props: P & diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js index b597e23f95e8f8..2fa3fbc729fa5e 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js @@ -14,7 +14,7 @@ import { programmaticFocusTriggersFocusVisible, } from 'test/utils'; import PropTypes from 'prop-types'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import ButtonBase, { buttonBaseClasses as classes } from '@material-ui/core/ButtonBase'; describe('', () => { @@ -104,7 +104,7 @@ describe('', () => { ); }); - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiButtonBase: { defaultProps: { diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index 55d627788c4410..b3937eef15af6f 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy, stub, useFakeTimers } from 'sinon'; import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import { Transition } from 'react-transition-group'; import Collapse, { collapseClasses as classes } from '@material-ui/core/Collapse'; @@ -143,7 +143,7 @@ describe('', () => { }); it('should delay based on height when timeout is auto', () => { - const theme = createMuiTheme({ + const theme = createTheme({ transitions: { getAutoHeightDuration: (n) => n, }, diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.test.js b/packages/material-ui/src/CssBaseline/CssBaseline.test.js index 516bdc9244105d..d3b0a4f2cd2192 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.test.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createClientRender } from 'test/utils'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; describe('', () => { const render = createClientRender(); @@ -20,7 +20,7 @@ describe('', () => { }); it('supports theme overrides as string', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiCssBaseline: { styleOverrides: `strong { font-weight: 500; }` } }, }); @@ -38,7 +38,7 @@ describe('', () => { }); it('supports theme overrides as object', () => { - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiCssBaseline: { styleOverrides: { strong: { fontWeight: '500' } } } }, }); diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js index 14a8a12c4d62a9..95fecdfc267832 100644 --- a/packages/material-ui/src/Drawer/Drawer.test.js +++ b/packages/material-ui/src/Drawer/Drawer.test.js @@ -6,7 +6,7 @@ import { createClientRender, describeConformanceV5, } from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Slide from '@material-ui/core/Slide'; import Paper from '@material-ui/core/Paper'; import Modal from '@material-ui/core/Modal'; @@ -248,7 +248,7 @@ describe('', () => { describe('Right To Left', () => { it('should switch left and right anchor when theme is right-to-left', () => { - const theme = createMuiTheme({ + const theme = createTheme({ direction: 'rtl', }); const wrapper1 = mount( diff --git a/packages/material-ui/src/GlobalStyles/GlobalStyles.test.js b/packages/material-ui/src/GlobalStyles/GlobalStyles.test.js index 217ee36af56fa0..1cd229ac4bb78c 100644 --- a/packages/material-ui/src/GlobalStyles/GlobalStyles.test.js +++ b/packages/material-ui/src/GlobalStyles/GlobalStyles.test.js @@ -2,9 +2,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { createClientRender } from 'test/utils'; import GlobalStyles from '@material-ui/core/GlobalStyles'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core//styles/'; +import { ThemeProvider, createTheme } from '@material-ui/core//styles/'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ spacing: 10, }); diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js index d0e26dcd8a9f12..c8265470365912 100644 --- a/packages/material-ui/src/Grid/Grid.test.js +++ b/packages/material-ui/src/Grid/Grid.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createMount, describeConformanceV5, createClientRender, screen } from 'test/utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Grid, { gridClasses as classes } from '@material-ui/core/Grid'; describe('', () => { @@ -85,7 +85,7 @@ describe('', () => { const parentWidth = 500; const remValue = 16; - const remTheme = createMuiTheme({ + const remTheme = createTheme({ spacing: (factor) => `${0.25 * factor}rem`, }); diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js index 0185c6150e0ac9..57e646a00488b5 100644 --- a/packages/material-ui/src/Grow/Grow.test.js +++ b/packages/material-ui/src/Grow/Grow.test.js @@ -4,7 +4,7 @@ import { spy, useFakeTimers } from 'sinon'; // use act from test/utils/createClientRender once we drop createMount from this test import { createClientRender, createMount, describeConformance } from 'test/utils'; import { act } from 'react-dom/test-utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { Transition } from 'react-transition-group'; import Grow from '@material-ui/core/Grow'; import useForkRef from '../utils/useForkRef'; @@ -138,7 +138,7 @@ describe('', () => { it('should delay based on height when timeout is auto', () => { const handleEntered = spy(); - const theme = createMuiTheme({ + const theme = createTheme({ transitions: { getAutoHeightDuration: (n) => n, }, diff --git a/packages/material-ui/src/Hidden/HiddenCss.test.js b/packages/material-ui/src/Hidden/HiddenCss.test.js index f67457184ca6e1..2ea1a20b2f2b3c 100644 --- a/packages/material-ui/src/Hidden/HiddenCss.test.js +++ b/packages/material-ui/src/Hidden/HiddenCss.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createMount, createClientRender } from 'test/utils'; import HiddenCss from './HiddenCss'; -import { createMuiTheme, MuiThemeProvider } from '../styles'; +import { createTheme, MuiThemeProvider } from '../styles'; import classes from './hiddenCssClasses'; const TestChild = () =>

bar
; @@ -84,7 +84,7 @@ describe('', () => { }); it('allows custom breakpoints', () => { - const theme = createMuiTheme({ breakpoints: { keys: ['xxl'] } }); + const theme = createTheme({ breakpoints: { keys: ['xxl'] } }); const { container } = render( diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js index 02dc28e215b686..febe8cfaa5dd6e 100644 --- a/packages/material-ui/src/ListItem/ListItem.test.js +++ b/packages/material-ui/src/ListItem/ListItem.test.js @@ -9,7 +9,7 @@ import { fireEvent, queries, } from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import ListItemText from '@material-ui/core/ListItemText'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItem, { listItemClasses as classes } from '@material-ui/core/ListItem'; @@ -214,7 +214,7 @@ describe('', () => { marginTop: '13px', }; - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiListItem: { styleOverrides: { diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index 0305c984aeb240..c7325ed327345a 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -11,7 +11,7 @@ import { createMount, describeConformanceV5, } from 'test/utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Fade from '@material-ui/core/Fade'; import Backdrop from '@material-ui/core/Backdrop'; import Modal, { modalClasses as classes } from '@material-ui/core/Modal'; @@ -64,7 +64,7 @@ describe('', () => { }); it('should consume theme default props', () => { - const theme = createMuiTheme({ components: { MuiModal: { defaultProps: { container } } } }); + const theme = createTheme({ components: { MuiModal: { defaultProps: { container } } } }); render( diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js index b4c8a65360494c..39cf4cc654f626 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.test.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.test.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createMuiTheme, ThemeProvider, experimentalStyled } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider, experimentalStyled } from '@material-ui/core/styles'; import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import NativeSelect, { nativeSelectClasses as classes } from '@material-ui/core/NativeSelect'; import Input, { inputClasses } from '@material-ui/core/Input'; @@ -74,7 +74,7 @@ describe('', () => { marginTop: '13px', }; - const theme = createMuiTheme({ + const theme = createTheme({ components: { MuiNativeSelect: { styleOverrides: { diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js index 0308c07f3a5967..88dd5f808eb166 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createClientRender } from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import NotchedOutline from './NotchedOutline'; describe('', () => { @@ -31,7 +31,7 @@ describe('', () => { it('should set alignment rtl', () => { const { container: container1 } = render( @@ -44,7 +44,7 @@ describe('', () => { const { container: container2 } = render( diff --git a/packages/material-ui/src/Pagination/Pagination.test.js b/packages/material-ui/src/Pagination/Pagination.test.js index 09301cada104ec..9c58cf3c50eb7f 100644 --- a/packages/material-ui/src/Pagination/Pagination.test.js +++ b/packages/material-ui/src/Pagination/Pagination.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, describeConformanceV5, createClientRender } from 'test/utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import Pagination, { paginationClasses as classes } from '@material-ui/core/Pagination'; describe('', () => { @@ -52,7 +52,7 @@ describe('', () => { it('renders controls with correct order in rtl theme', () => { const { getAllByRole } = render( @@ -73,7 +73,7 @@ describe('', () => { it('renders correct amount of buttons on correct order when boundaryCount is zero', () => { const { getAllByRole } = render( diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js index 8f4ab08ae9a5f1..8c2e6bcabc4330 100644 --- a/packages/material-ui/src/Paper/Paper.test.js +++ b/packages/material-ui/src/Paper/Paper.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import * as PropTypes from 'prop-types'; import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import Paper, { paperClasses as classes } from '@material-ui/core/Paper'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; describe('', () => { const render = createClientRender(); @@ -72,7 +72,7 @@ describe('', () => { }); it('allows custom elevations via theme.shadows', () => { - const theme = createMuiTheme(); + const theme = createTheme(); theme.shadows.push('20px 20px'); const { getByTestId } = render( diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js index e7508ca3cfa36b..89fb538def95b6 100644 --- a/packages/material-ui/src/Popper/Popper.test.js +++ b/packages/material-ui/src/Popper/Popper.test.js @@ -10,7 +10,7 @@ import { fireEvent, screen, } from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import Grow from '@material-ui/core/Grow'; import Popper from '@material-ui/core/Popper'; @@ -25,7 +25,7 @@ describe('', () => { }; before(() => { - rtlTheme = createMuiTheme({ + rtlTheme = createTheme({ direction: 'rtl', }); }); diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 23ad84d0865d53..f09bae31bfcd28 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -10,7 +10,7 @@ import { fireEvent, screen, } from 'test/utils'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import InputBase from '@material-ui/core/InputBase'; import OutlinedInput from '@material-ui/core/OutlinedInput'; @@ -1160,7 +1160,7 @@ describe('