From bf65be2e27039f3cf9084577d0a8b7bc772bc52c Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 30 Apr 2021 14:50:42 -0300 Subject: [PATCH] [theme] Deprecate `createMuiTheme` (#26004) --- docs/public/static/error-codes.json | 2 +- docs/scripts/buildApi.js | 4 +-- docs/src/modules/components/ThemeContext.js | 10 +++--- 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/breakpoints/breakpoints-de.md | 2 +- .../components/breakpoints/breakpoints-es.md | 2 +- .../components/breakpoints/breakpoints-fr.md | 2 +- .../components/breakpoints/breakpoints-ja.md | 2 +- .../components/breakpoints/breakpoints-pt.md | 2 +- .../components/breakpoints/breakpoints-ru.md | 2 +- .../components/breakpoints/breakpoints-zh.md | 2 +- .../components/buttons/CustomizedButtons.js | 4 +-- .../components/buttons/CustomizedButtons.tsx | 4 +-- .../text-fields/CustomizedInputs.js | 4 +-- .../text-fields/CustomizedInputs.tsx | 4 +-- .../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 +-- .../breakpoints/breakpoints-de.md | 6 ++-- .../breakpoints/breakpoints-es.md | 6 ++-- .../breakpoints/breakpoints-fr.md | 6 ++-- .../breakpoints/breakpoints-ja.md | 6 ++-- .../breakpoints/breakpoints-pt.md | 6 ++-- .../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 +++++----- .../components/DynamicThemeNesting.js | 6 ++-- .../components/DynamicThemeNesting.tsx | 6 ++-- .../components/GlobalThemeOverride.js | 4 +-- .../components/GlobalThemeOverride.tsx | 4 +-- .../components/ThemeVariables.js | 4 +-- .../components/ThemeVariables.tsx | 4 +-- .../customization/components/components-de.md | 4 +-- .../customization/components/components-es.md | 4 +-- .../customization/components/components-fr.md | 4 +-- .../customization/components/components-ja.md | 4 +-- .../customization/components/components-pt.md | 4 +-- .../customization/components/components-ru.md | 4 +-- .../customization/components/components-zh.md | 4 +-- .../customization/components/components.md | 4 +-- .../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 +- .../customization/globals/DefaultProps.js | 4 +-- .../customization/globals/DefaultProps.tsx | 4 +-- .../pages/customization/globals/GlobalCss.js | 4 +-- .../pages/customization/globals/GlobalCss.tsx | 4 +-- .../pages/customization/globals/globals-de.md | 6 ++-- .../pages/customization/globals/globals-es.md | 6 ++-- .../pages/customization/globals/globals-fr.md | 6 ++-- .../pages/customization/globals/globals-ja.md | 8 ++--- .../pages/customization/globals/globals-pt.md | 6 ++-- .../pages/customization/globals/globals-ru.md | 6 ++-- .../pages/customization/globals/globals-zh.md | 6 ++-- .../pages/customization/globals/globals.md | 6 ++-- .../pages/customization/palette/DarkTheme.js | 6 ++-- .../pages/customization/palette/Palette.js | 4 +-- .../pages/customization/palette/Palette.tsx | 4 +-- .../pages/customization/palette/palette-de.md | 20 ++++++------ .../pages/customization/palette/palette-es.md | 20 ++++++------ .../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 ++--- .../customization/theming/CustomStyles.js | 4 +-- .../customization/theming/CustomStyles.tsx | 8 ++--- .../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 | 10 +++--- .../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/TypographyVariants.js | 4 +-- .../typography/TypographyVariants.tsx | 4 +-- .../customization/typography/typography-de.md | 16 +++++----- .../customization/typography/typography-es.md | 16 +++++----- .../customization/typography/typography-fr.md | 16 +++++----- .../customization/typography/typography-ja.md | 16 +++++----- .../customization/typography/typography-pt.md | 16 +++++----- .../customization/typography/typography-ru.md | 16 +++++----- .../customization/typography/typography-zh.md | 16 +++++----- .../customization/typography/typography.md | 16 +++++----- docs/src/pages/getting-started/faq/faq-de.md | 12 +++---- docs/src/pages/getting-started/faq/faq-es.md | 12 +++---- 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 +++---- .../guides/interoperability/EmotionTheme.js | 8 ++--- .../guides/interoperability/EmotionTheme.tsx | 8 ++--- .../interoperability/StyledComponentsTheme.js | 8 ++--- .../StyledComponentsTheme.tsx | 8 ++--- 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/right-to-left/Direction.js | 4 +-- .../pages/guides/right-to-left/Direction.tsx | 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 +- .../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 | 10 +++--- .../premium-themes/onepirate/modules/theme.js | 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 +- docs/src/pages/system/basics/Demo.js | 4 +-- docs/src/pages/system/basics/Demo.tsx | 4 +-- docs/src/pages/system/basics/SxProp.js | 4 +-- docs/src/pages/system/basics/SxProp.tsx | 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-benchmark/src/server.js | 4 +-- packages/material-ui-benchmark/src/system.js | 6 ++-- 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 +- .../src/Pagination/Pagination.test.js | 4 +-- .../src/themeAugmentation/overrides.spec.ts | 4 +-- .../src/themeAugmentation/props.spec.ts | 6 ++-- .../src/makeStyles/makeStyles.test.js | 12 +++---- .../src/withStyles/withStyles.test.js | 16 +++++----- .../material-ui/src/Collapse/Collapse.d.ts | 2 +- .../material-ui/src/Collapse/Collapse.test.js | 4 +-- .../src/CssBaseline/CssBaseline.spec.tsx | 8 ++--- packages/material-ui/src/Drawer/Drawer.d.ts | 2 +- .../material-ui/src/Drawer/Drawer.test.js | 4 +-- packages/material-ui/src/Grid/Grid.test.js | 6 ++-- packages/material-ui/src/Grow/Grow.d.ts | 2 +- packages/material-ui/src/Grow/Grow.test.js | 4 +-- .../material-ui/src/Hidden/HiddenCss.test.js | 4 +-- packages/material-ui/src/Modal/Modal.test.js | 4 +-- .../src/OutlinedInput/NotchedOutline.test.js | 6 ++-- packages/material-ui/src/Paper/Paper.test.js | 4 +-- .../material-ui/src/Popper/Popper.test.js | 4 +-- packages/material-ui/src/Slide/Slide.d.ts | 2 +- packages/material-ui/src/Slide/Slide.test.js | 4 +-- .../material-ui/src/Slider/Slider.test.js | 6 ++-- packages/material-ui/src/Tabs/Tabs.test.js | 4 +-- packages/material-ui/src/Zoom/Zoom.d.ts | 2 +- .../src/styles/createMixins.spec.ts | 4 +-- .../src/styles/createMixins.test.js | 6 ++-- .../src/styles/createMuiStrictModeTheme.js | 4 +-- .../material-ui/src/styles/createPalette.js | 4 +-- .../src/styles/createPalette.spec.ts | 4 +-- .../src/styles/createSpacing.spec.ts | 6 ++-- .../{createMuiTheme.d.ts => createTheme.d.ts} | 8 ++++- .../{createMuiTheme.js => createTheme.js} | 23 ++++++++++++-- ...teMuiTheme.test.js => createTheme.test.js} | 31 +++++++++---------- .../src/styles/createTypography.spec.ts | 4 +-- .../material-ui/src/styles/defaultTheme.js | 4 +-- packages/material-ui/src/styles/index.d.ts | 5 +-- 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 ++-- .../test/typescript/styles.spec.tsx | 16 +++++----- scripts/sizeSnapshot/webpack.config.js | 4 +-- 269 files changed, 819 insertions(+), 812 deletions(-) rename packages/material-ui/src/styles/{createMuiTheme.d.ts => createTheme.d.ts} (84%) rename packages/material-ui/src/styles/{createMuiTheme.js => createTheme.js} (84%) rename packages/material-ui/src/styles/{createMuiTheme.test.js => createTheme.test.js} (76%) diff --git a/docs/public/static/error-codes.json b/docs/public/static/error-codes.json index 9e9265c0c78c6c..ab006363a22f84 100644 --- a/docs/public/static/error-codes.json +++ b/docs/public/static/error-codes.json @@ -3,7 +3,7 @@ "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." } \ No newline at end of file diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index f194964f9b3a77..fbbee7597c493b 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -16,7 +16,7 @@ import { findPagesMarkdown, findComponents } from '../src/modules/utils/find'; import { getHeaders } from '../src/modules/utils/parseMarkdown'; import parseTest from '../src/modules/utils/parseTest'; import { pageToTitle } from '../src/modules/utils/helpers'; -import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme'; +import createTheme from '../../packages/material-ui/src/styles/createTheme'; import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator'; import createGenerateClassName from '../../packages/material-ui-styles/src/createGenerateClassName'; @@ -51,7 +51,7 @@ if (args.length < 4) { const rootDirectory = path.resolve(__dirname, '../../'); const docsApiDirectory = path.resolve(rootDirectory, args[3]); -const theme = createMuiTheme(); +const theme = createTheme(); const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/; diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index fee17252f0b868..debd1226100510 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -2,7 +2,7 @@ import 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'; @@ -98,11 +98,11 @@ if (process.env.NODE_ENV !== 'production') { const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect; -let createMuiTheme; +let createTheme; if (process.env.REACT_MODE === 'legacy') { - createMuiTheme = createLegacyModeTheme; + createTheme = createLegacyModeTheme; } else { - createMuiTheme = createStrictModeTheme; + createTheme = createStrictModeTheme; } export function ThemeProvider(props) { @@ -184,7 +184,7 @@ export function ThemeProvider(props) { }, [direction]); const theme = React.useMemo(() => { - const nextTheme = createMuiTheme( + const nextTheme = createTheme( { direction, nprogress: { diff --git a/docs/src/modules/utils/parseMarkdown.test.js b/docs/src/modules/utils/parseMarkdown.test.js index 0e32d2f083aa42..009dffcc961ec4 100644 --- a/docs/src/modules/utils/parseMarkdown.test.js +++ b/docs/src/modules/utils/parseMarkdown.test.js @@ -89,7 +89,7 @@ authors: ['foo', 'bar'] # Theming ## API ### responsiveFontSizes(theme, options) => theme -### createMuiTheme(options, ...args) => theme +### createTheme(options, ...args) => theme `; // mock require.context function requireRaw() { @@ -115,9 +115,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 da29012c89af99..079ae31a4e1cc1 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 726b58ab037aaa..26c30b5c6e0162 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/globals/#css) and [d ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 f717e928840279..629421bf5f911f 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/globals/# ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 8e59debdef7f4b..7917cd66ff4771 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/globals/#css) et [ ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 d12ca9e182ee33..c63157456af558 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 type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 1f1e0a471425f6..93400b937cd7e1 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/globals/#css) e [customiza ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 23ded26474f844..7f5b28bcc4e0d3 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 type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 310d001821cb8a..cca08c34e40fff 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 ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { 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 a1efd5de8c599e..8f427d30adb365 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 @@ -44,7 +44,7 @@ In order to benefit from the [CSS overrides](/customization/globals/#css) and [d ```tsx import type '@material-ui/lab/themeAugmentation'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiTimeline: { root: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-de.md b/docs/src/pages/components/breakpoints/breakpoints-de.md index 870db85b7be73b..d3c7313eb91392 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-de.md +++ b/docs/src/pages/components/breakpoints/breakpoints-de.md @@ -207,7 +207,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. Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/themes/#default-props) zum Theme verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-es.md b/docs/src/pages/components/breakpoints/breakpoints-es.md index aeb809a1b66410..f5c644786d3415 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-es.md +++ b/docs/src/pages/components/breakpoints/breakpoints-es.md @@ -207,7 +207,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-fr.md b/docs/src/pages/components/breakpoints/breakpoints-fr.md index 9513a015bfe701..d77eabed12fb70 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-fr.md +++ b/docs/src/pages/components/breakpoints/breakpoints-fr.md @@ -207,7 +207,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-ja.md b/docs/src/pages/components/breakpoints/breakpoints-ja.md index 10bd41869fe401..453e306334bb9b 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-ja.md +++ b/docs/src/pages/components/breakpoints/breakpoints-ja.md @@ -207,7 +207,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-pt.md b/docs/src/pages/components/breakpoints/breakpoints-pt.md index 4971c112c1b298..ca966d7e03fbb1 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/components/breakpoints/breakpoints-pt.md @@ -207,7 +207,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. https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/themes/#default-props) no tema. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Componente withWidth ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-ru.md b/docs/src/pages/components/breakpoints/breakpoints-ru.md index 9ba26434ddbb39..4b84bc54da1cec 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-ru.md +++ b/docs/src/pages/components/breakpoints/breakpoints-ru.md @@ -207,7 +207,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/breakpoints/breakpoints-zh.md b/docs/src/pages/components/breakpoints/breakpoints-zh.md index 58d56d93b4bb58..2796f465224cce 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-zh.md +++ b/docs/src/pages/components/breakpoints/breakpoints-zh.md @@ -207,7 +207,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - `options.initialWidth` （*Breakpoint* [可选的]）： 为`window.innerWidth`在服务器上不可用， 我们默认在第一次安装期间呈现空组件。 您可能希望使用启发式来近似 客户端浏览器屏幕宽度的屏幕宽度。 例如，您可以使用用户代理或客户端提示。 https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. 为了设置initialWidth，我们需要传递一个具有以下形状的自定义属性： ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index 6cb0cec9bbe568..5512cca5969c39 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -1,5 +1,5 @@ import React from 'react'; -import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { green, purple } from '@material-ui/core/colors'; @@ -57,7 +57,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 8b3577afa984e3..612da1709936d1 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.tsx +++ b/docs/src/pages/components/buttons/CustomizedButtons.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { - createMuiTheme, + createTheme, createStyles, withStyles, makeStyles, @@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, }, diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index 82593b8405dee4..d83437a884a6a6 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/docs/src/pages/components/text-fields/CustomizedInputs.js @@ -4,7 +4,7 @@ import { ThemeProvider, withStyles, makeStyles, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; import InputBase from '@material-ui/core/InputBase'; import InputLabel from '@material-ui/core/InputLabel'; @@ -121,7 +121,7 @@ const ValidationTextField = withStyles({ }, })(TextField); -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, }, diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.tsx b/docs/src/pages/components/text-fields/CustomizedInputs.tsx index 14ac9509873095..996128ea6b7a1f 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.tsx +++ b/docs/src/pages/components/text-fields/CustomizedInputs.tsx @@ -6,7 +6,7 @@ import { ThemeProvider, withStyles, makeStyles, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; import InputBase from '@material-ui/core/InputBase'; import InputLabel from '@material-ui/core/InputLabel'; @@ -135,7 +135,7 @@ const ValidationTextField = withStyles({ }, })(TextField); -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, }, diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md index a7b4f22f40d0bf..b0ef3bd6a8973f 100644 --- a/docs/src/pages/components/typography/typography-de.md +++ b/docs/src/pages/components/typography/typography-de.md @@ -63,7 +63,7 @@ Heading - Sie können das Mapping [global mit dem Theme](/customization/globals/#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 d6fa14c2dc37c6..741a411e3532b3 100644 --- a/docs/src/pages/components/typography/typography-es.md +++ b/docs/src/pages/components/typography/typography-es.md @@ -63,7 +63,7 @@ Heading - You can change the mapping [globally using the theme](/customization/globals/#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 3e70719094747c..27130110ed2877 100644 --- a/docs/src/pages/components/typography/typography-fr.md +++ b/docs/src/pages/components/typography/typography-fr.md @@ -63,7 +63,7 @@ Heading - You can change the mapping [globally using the theme](/customization/globals/#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 dbd8f3754a9208..9b631442b3adb8 100644 --- a/docs/src/pages/components/typography/typography-ja.md +++ b/docs/src/pages/components/typography/typography-ja.md @@ -63,7 +63,7 @@ Heading - 以下のようにテーマ使用して、[マッピング をグローバルに](/customization/globals/#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 6a9225e9ba385d..56a6383c95255b 100644 --- a/docs/src/pages/components/typography/typography-pt.md +++ b/docs/src/pages/components/typography/typography-pt.md @@ -63,7 +63,7 @@ O componente de Tipografia (Typography) usa a propriedade `variantMapping` para - Você pode alterar o mapeamento [globalmente usando o tema](/customization/globals/#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 0659ca456b4567..ddbbba469a3111 100644 --- a/docs/src/pages/components/typography/typography-ru.md +++ b/docs/src/pages/components/typography/typography-ru.md @@ -64,7 +64,7 @@ Heading - Вы можете изменить сопоставление вариантов [глобально используя тему](/customization/globals/#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 28c79161787244..d6cd0b4a0918a5 100644 --- a/docs/src/pages/components/typography/typography-zh.md +++ b/docs/src/pages/components/typography/typography-zh.md @@ -63,7 +63,7 @@ import 'fontsource-roboto'; - 您也可以 [使用 theme](/customization/globals/#default-props) 来修改全局字体映射。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 57a76b82e6c3cc..7746d757df2e0f 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -72,7 +72,7 @@ It’s important to realize that the style of a typography is independent from t - You can change the mapping [globally using the theme](/customization/globals/#default-props): ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { MuiTypography: { variantMapping: { diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js index 2c538a9005be3c..447fa7fe2a6cab 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 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 2c538a9005be3c..447fa7fe2a6cab 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 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 ce42a8c65cd478..ac523f3d01bdf2 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 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 8cd8e061a2799d..7322b3fb7724b3 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.tsx +++ b/docs/src/pages/components/use-media-query/UseWidth.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Theme, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; +import { Theme, ThemeProvider, useTheme, createTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; @@ -27,7 +27,7 @@ function MyComponent() { return {`width: ${width}`}; } -const theme = createMuiTheme(); +const theme = createTheme(); export default function UseWidth() { return ( diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md index 08bec319176891..67a08073581e0e 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-de.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md @@ -94,7 +94,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, @@ -110,7 +110,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, @@ -264,7 +264,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. Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/globals/#default-props) zum Theme verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben: ```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 4f0b1903370634..b6dccaa8969da2 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-es.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md @@ -94,7 +94,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, @@ -110,7 +110,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, @@ -264,7 +264,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```js -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 dcf27c317d0fd4..9036a97d1f6f54 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md @@ -94,7 +94,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, @@ -110,7 +110,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, @@ -264,7 +264,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```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 bcada04ad89ab0..31dc6bd2c842f8 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md @@ -94,7 +94,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, @@ -110,7 +110,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, @@ -266,7 +266,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; グローバルに設定することもできます`](/customization/globals/#default-props)。 InitialWidthを設定するには、この形状のカスタムプロパティを渡す必要があります。 ```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 fbf74eb5696a87..bd05ed6dcaea50 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md @@ -94,7 +94,7 @@ Você define os pontos de quebra do seu projeto na seção `theme.breakpoints` d Se você alterar os valores dos pontos de quebra padrão, você precisará fornecer novos conforme descreveremos: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -110,7 +110,7 @@ const theme = createMuiTheme({ 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, @@ -264,7 +264,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. https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/globals/#default-props) no tema. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma: ```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 059047de68810c..fcdc2a501e370b 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md @@ -94,7 +94,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, @@ -110,7 +110,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, @@ -264,7 +264,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. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape: ```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 9ea2f44fb5ad5a..07855857c2fea6 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md @@ -94,7 +94,7 @@ export default withWidth()(MyComponent); 如果您需要更改断点的默认值，则需要提供所有的断点值： ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { xs: 0, @@ -110,7 +110,7 @@ const theme = createMuiTheme({ 您可以随意设置任意数量的断点，并且也可以在项目中以您喜欢的任何方式为断点命名。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ breakpoints: { values: { tablet: 640, @@ -264,7 +264,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - `options.initialWidth` (*Breakpoint* [optional])：鉴于在服务器端 `window.innerWidth` 是无法获取的，我们将在第一次渲染时默认加载一个空的组件。 您可以使用启发式的方法来推算近似客户端浏览器屏幕宽度的屏幕宽度。 例如：您可以使用 user-agent 或 client-hints。 https://caniuse.com/#search=client%20hint，我们也可以在主题上使用 [`自定义属性`](/customization/globals/#default-props) 来设置全局的初始宽度。 若想设置 initialWidth，我们需要传递一个类似于这样的自定义属性： ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // 带宽度（withWidth）的组件 ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md index 608ace9d62a8ab..e9dd05a09dbe4c 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints.md +++ b/docs/src/pages/customization/breakpoints/breakpoints.md @@ -100,7 +100,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, @@ -116,7 +116,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, @@ -286,7 +286,7 @@ For instance, it can be used to defined a `getInitialProps()` static method (nex In order to set the initialWidth we need to pass a custom property with this shape: ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // withWidth component ⚛️ MuiWithWidth: { diff --git a/docs/src/pages/customization/color/color-de.md b/docs/src/pages/customization/color/color-de.md index ffafde4e6e2174..3857af8132d049 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/#createtheme-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 0be0b1ee42c33d..00f2477183419f 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/#createtheme-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 17a35f7b465b12..5cab3facc5ab29 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/#createtheme-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 d4cbc869d0d953..6e6def75b71a17 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/#createtheme-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 009a8b342a0dd6..e02cb13bc4d694 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/#createtheme-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 5454eb4a108ba4..3b33f8d96e0d1c 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/#createtheme-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 a3dc1320b0f79e..40bcc4341e7397 100644 --- a/docs/src/pages/customization/color/color-zh.md +++ b/docs/src/pages/customization/color/color-zh.md @@ -17,12 +17,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', @@ -46,13 +46,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/#createtheme-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], @@ -64,9 +64,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 ae9008f4aaea13..5482c7a07d4386 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/#createtheme-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/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js index 2e8b35070ddb71..4bfdeab81d00b5 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.js +++ b/docs/src/pages/customization/components/DynamicThemeNesting.js @@ -1,6 +1,6 @@ import React from 'react'; import Button from '@material-ui/core/Button'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { blue } 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 (color === 'blue') { - return createMuiTheme({ + return createTheme({ palette: { secondary: { main: blue[500], @@ -23,7 +23,7 @@ export default function DynamicThemeNesting() { }, }); } - return createMuiTheme(); + return createTheme(); }, [color]); return ( diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.tsx b/docs/src/pages/customization/components/DynamicThemeNesting.tsx index a7de6b26c8820b..3f79e8bc49a0c5 100644 --- a/docs/src/pages/customization/components/DynamicThemeNesting.tsx +++ b/docs/src/pages/customization/components/DynamicThemeNesting.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Button from '@material-ui/core/Button'; -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 { blue } 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 (color === 'blue') { - return createMuiTheme({ + return createTheme({ palette: { secondary: { main: blue[500], @@ -23,7 +23,7 @@ export default function DynamicThemeNesting() { }, }); } - return createMuiTheme(); + return createTheme(); }, [color]); return ( diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.js b/docs/src/pages/customization/components/GlobalThemeOverride.js index b2278f7e14322d..d86ea857b1b321 100644 --- a/docs/src/pages/customization/components/GlobalThemeOverride.js +++ b/docs/src/pages/customization/components/GlobalThemeOverride.js @@ -1,8 +1,8 @@ import 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({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.tsx b/docs/src/pages/customization/components/GlobalThemeOverride.tsx index b2278f7e14322d..d86ea857b1b321 100644 --- a/docs/src/pages/customization/components/GlobalThemeOverride.tsx +++ b/docs/src/pages/customization/components/GlobalThemeOverride.tsx @@ -1,8 +1,8 @@ import 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({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/ThemeVariables.js b/docs/src/pages/customization/components/ThemeVariables.js index 1f77cd2ae705fc..ae25e640b9de69 100644 --- a/docs/src/pages/customization/components/ThemeVariables.js +++ b/docs/src/pages/customization/components/ThemeVariables.js @@ -1,8 +1,8 @@ import 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/components/ThemeVariables.tsx b/docs/src/pages/customization/components/ThemeVariables.tsx index 1f77cd2ae705fc..ae25e640b9de69 100644 --- a/docs/src/pages/customization/components/ThemeVariables.tsx +++ b/docs/src/pages/customization/components/ThemeVariables.tsx @@ -1,8 +1,8 @@ import 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/components/components-de.md b/docs/src/pages/customization/components/components-de.md index 3d7a6b13cdcb0f..ec26ff5d26497c 100644 --- a/docs/src/pages/customization/components/components-de.md +++ b/docs/src/pages/customization/components/components-de.md @@ -238,7 +238,7 @@ The demos of this section covers how to the change the button's font size. You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ Wenn die Konfigurationsvariablen nicht ausreichen, können Sie die Vorteile der `overrides` Schlüssel des `Theme` verwenden, um potenziell jeden einzelnen von Material-UI in den DOM eingefügten Stil zu ändern. Weitere Informationen dazu finden Sie im [Themen](/customization/globals/#css) Abschnitt der Dokumentation. ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-es.md b/docs/src/pages/customization/components/components-es.md index a5e4932fe0a4f5..61c1a0f1fc3633 100644 --- a/docs/src/pages/customization/components/components-es.md +++ b/docs/src/pages/customization/components/components-es.md @@ -238,7 +238,7 @@ The demos of this section covers how to the change the button's font size. You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ You can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM. Learn more about it in the [themes section](/customization/globals/#css) of the documentation. ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-fr.md b/docs/src/pages/customization/components/components-fr.md index 885f989ca7454b..6091e4083fe24c 100644 --- a/docs/src/pages/customization/components/components-fr.md +++ b/docs/src/pages/customization/components/components-fr.md @@ -238,7 +238,7 @@ The demos of this section covers how to the change the button's font size. You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ You can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM. Learn more about it in the [themes section](/customization/globals/#css) of the documentation. ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-ja.md b/docs/src/pages/customization/components/components-ja.md index 38a2ac6d790931..4a34cf1395ac41 100644 --- a/docs/src/pages/customization/components/components-ja.md +++ b/docs/src/pages/customization/components/components-ja.md @@ -243,7 +243,7 @@ Material-UIは、これらすべてのバリエーションを実装しようと `theme`の`overrides`キーを利用すると、Material-UIによってDOMに注入されるすべてのスタイルを潜在的に変更できます。 詳細については、ドキュメントの[テーマセクションをご覧ください](/customization/globals/#css)。 ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -281,7 +281,7 @@ const GlobalCss = withStyles({ `theme`の`overrides`キーを利用すると、Material-UIによってDOMに注入されるすべてのスタイルを潜在的に変更できます。 詳細については、ドキュメントの[テーマセクションをご覧ください](/customization/globals/#css)。 ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-pt.md b/docs/src/pages/customization/components/components-pt.md index 608e8f6049a47f..05565d716e6d84 100644 --- a/docs/src/pages/customization/components/components-pt.md +++ b/docs/src/pages/customization/components/components-pt.md @@ -238,7 +238,7 @@ As demonstrações desta seção abordam como alterar o tamanho da fonte do bot Você pode ajustar [as variáveis de configuração do tema](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ Você pode aproveitar as vantagens de `sobrescrita` da chave do `tema` para potencialmente alterar cada estilo injetado pelo Material-UI no DOM. Saiba mais sobre isso na [seção de temas](/customization/globals/#css) da documentação. ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-ru.md b/docs/src/pages/customization/components/components-ru.md index eaabffef33e096..9b07f3cfa86301 100644 --- a/docs/src/pages/customization/components/components-ru.md +++ b/docs/src/pages/customization/components/components-ru.md @@ -238,7 +238,7 @@ The demos of this section covers how to the change the button's font size. You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ Вы можете воспользоваться `переопределением` ключевых параметров `темы`, чтобы потенциально изменить любой стиль, внедренный Material-UI в DOM. Дальнейшие подробности об этом в разделе документации [темы](/customization/globals/#css). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components-zh.md b/docs/src/pages/customization/components/components-zh.md index 6d81a842877ab3..e08dfe989c7e09 100644 --- a/docs/src/pages/customization/components/components-zh.md +++ b/docs/src/pages/customization/components/components-zh.md @@ -238,7 +238,7 @@ Material-UI 会尝试实现所有这些变体。 请参阅[支持的组件](/get 你可以调整[主题配置中的变量](/customization/theming/#theme-configuration-variables)。 ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -276,7 +276,7 @@ const GlobalCss = withStyles({ 利用`可被覆盖`的`主题`的键，您很有可能改变由 Material-UI 注入 DOM 的每个单独样式。 在[主题部分](/customization/globals/#css)可以了解有关它的更多信息。 ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/components/components.md b/docs/src/pages/customization/components/components.md index 9bfe0d627ef82c..d3576d306037b4 100644 --- a/docs/src/pages/customization/components/components.md +++ b/docs/src/pages/customization/components/components.md @@ -264,7 +264,7 @@ The demos of this section covers how to the change the button's font size. You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables). ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ typography: { button: { fontSize: '1rem', @@ -305,7 +305,7 @@ You can take advantage of the `overrides` key of the `theme` to potentially chan Learn more about it in the [themes section](/customization/globals/#css) of the documentation. ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiButton: { root: { diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 69e11452bb7e34..e6db6515ee6c36 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -7,7 +7,7 @@ import CollapseIcon from '@material-ui/icons/ChevronRight'; import TreeView from '@material-ui/lab/TreeView'; import TreeItem from '@material-ui/lab/TreeItem'; import clsx from 'clsx'; -import { makeStyles, withStyles, createMuiTheme, lighten } from '@material-ui/core/styles'; +import { makeStyles, withStyles, createTheme, lighten } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; @@ -277,7 +277,7 @@ function DefaultTheme(props) { }, []); const data = React.useMemo(() => { - return createMuiTheme({ palette: { type: darkTheme ? 'dark' : 'light' } }); + return createTheme({ palette: { type: darkTheme ? 'dark' : 'light' } }); }, [darkTheme]); const allNodeIds = useNodeIdsLazy(data); 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 9b12ed1080b1db..9f713bf1a2c783 100644 --- a/docs/src/pages/customization/default-theme/default-theme-de.md +++ b/docs/src/pages/customization/default-theme/default-theme-de.md @@ -10,4 +10,4 @@ Explore the default theme object: > Tip: you can play with the documentation theme object in your browser console, as the `theme` variable is exposed on all the documentation pages. Please note that **the documentation site is using a custom theme**. -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/master/packages/material-ui/src/styles/createMuiTheme.js), und die zugehörigen Importe, die `createMuiTheme` verwendet. \ No newline at end of file +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/master/packages/material-ui/src/styles/createTheme.js), und die zugehörigen Importe, die `createTheme` verwendet. \ No newline at end of file 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 5253c9e069ab2f..92d9c0d97698e8 100644 --- a/docs/src/pages/customization/default-theme/default-theme-es.md +++ b/docs/src/pages/customization/default-theme/default-theme-es.md @@ -10,4 +10,4 @@ Explore the default theme object: > Tip: you can play with the documentation theme object in your browser console, as the `theme` variable is exposed on all the documentation pages. Please note that **the documentation site is using a custom theme**. -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/master/packages/material-ui/src/styles/createMuiTheme.js), y los imports que utiliza `createMuiTheme`. \ No newline at end of file +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/master/packages/material-ui/src/styles/createTheme.js), y los imports que utiliza `createTheme`. \ No newline at end of file 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 9d7dca0cfba1aa..06e6633e99d807 100644 --- a/docs/src/pages/customization/default-theme/default-theme-fr.md +++ b/docs/src/pages/customization/default-theme/default-theme-fr.md @@ -10,4 +10,4 @@ Explore the default theme object: > Tip: you can play with the documentation theme object in your browser console, as the `theme` variable is exposed on all the documentation pages. Please note that **the documentation site is using a custom theme**. -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/master/packages/material-ui/src/styles/createMuiTheme.js), and the related imports which `createMuiTheme` uses. \ No newline at end of file +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/master/packages/material-ui/src/styles/createTheme.js), and the related imports which `createTheme` uses. \ No newline at end of file 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 7d63ab3584fd72..7fedfc831214b9 100644 --- a/docs/src/pages/customization/default-theme/default-theme-ja.md +++ b/docs/src/pages/customization/default-theme/default-theme-ja.md @@ -10,4 +10,4 @@ Explore the default theme object: > Tip: you can play with the documentation theme object in your browser console, as the `theme` variable is exposed on all the documentation pages. Please note that **the documentation site is using a custom theme**. -テーマについてもっと知りたい場合は、[`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js)又は `createMuiTheme`に関連するものをインポートして使って下さい。 \ No newline at end of file +テーマについてもっと知りたい場合は、[`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createTheme.js)又は `createTheme`に関連するものをインポートして使って下さい。 \ No newline at end of file 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 fb24c35e30213f..23caaa68368799 100644 --- a/docs/src/pages/customization/default-theme/default-theme-pt.md +++ b/docs/src/pages/customization/default-theme/default-theme-pt.md @@ -10,4 +10,4 @@ Explore o objeto de tema padrão: > Dica: você pode visualizar o objeto de tema usado na documentação no console do seu navegador com a variável `theme`, exposta em todas as páginas de documentação. Observe que **o site de documentação está usando um tema customizado**. -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/master/packages/material-ui/src/styles/createMuiTheme.js), e as importações relacionadas que `createMuiTheme` usa. \ No newline at end of file +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/master/packages/material-ui/src/styles/createTheme.js), e as importações relacionadas que `createTheme` usa. \ No newline at end of file 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 789b77a1746e11..f79a4d50cc0b2c 100644 --- a/docs/src/pages/customization/default-theme/default-theme-ru.md +++ b/docs/src/pages/customization/default-theme/default-theme-ru.md @@ -10,4 +10,4 @@ Explore the default theme object: > Tip: you can play with the documentation theme object in your browser console, as the `theme` variable is exposed on all the documentation pages. Please note that **the documentation site is using a custom theme**. -Подробности о структуре темы изнутри можно посмотреть здесь [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), а также изучив зависимости, используемые `createMuiTheme`. \ No newline at end of file +Подробности о структуре темы изнутри можно посмотреть здесь [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createTheme.js), а также изучив зависимости, используемые `createTheme`. \ No newline at end of file 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 32adf8601e3f30..1543631d1fbfe3 100644 --- a/docs/src/pages/customization/default-theme/default-theme-zh.md +++ b/docs/src/pages/customization/default-theme/default-theme-zh.md @@ -10,4 +10,4 @@ > 提示：你可以在浏览器控制台中尝试文档主题对象，鉴于在所有的文档页面上，您都可以获取 `theme` 变量。 请注意，**本文档站点正在使用自定义主题**。 -如果你想了解更多有关主题是如何组合的信息，请看看 [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js) 和 如何用 `createMuiTheme` 导入主题的。 \ No newline at end of file +如果你想了解更多有关主题是如何组合的信息，请看看 [`material-ui/style/createTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createTheme.js) 和 如何用 `createTheme` 导入主题的。 \ No newline at end of file diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md index fcf6764125080d..ec1954bd8fa3bc 100644 --- a/docs/src/pages/customization/default-theme/default-theme.md +++ b/docs/src/pages/customization/default-theme/default-theme.md @@ -12,5 +12,5 @@ Explore the default theme object: > as the `theme` variable is exposed on all the documentation pages. > Please note that **the documentation site is using a custom theme**. -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/master/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/master/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 698f853a9f2d12..bfef31bf1e6689 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 256782ef613133..b30c0c29df4b6e 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 1836181326056f..20c1d2e4dfd99f 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 6d94263bb9d27d..b7a772e76d6379 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 63d97721598e45..5860edbf3fa31a 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 fdc289055d1dad..80a0477a7c8af6 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 96df3a758dbac7..477e4b3d903ca9 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({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/density/density.md b/docs/src/pages/customization/density/density.md index 4514f92f2e11cc..e82113de954d08 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({ props: { MuiButton: { size: 'small', diff --git a/docs/src/pages/customization/globals/DefaultProps.js b/docs/src/pages/customization/globals/DefaultProps.js index eef23c5cb2d498..521f25de9b12bb 100644 --- a/docs/src/pages/customization/globals/DefaultProps.js +++ b/docs/src/pages/customization/globals/DefaultProps.js @@ -1,8 +1,8 @@ import 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({ props: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/DefaultProps.tsx b/docs/src/pages/customization/globals/DefaultProps.tsx index eef23c5cb2d498..521f25de9b12bb 100644 --- a/docs/src/pages/customization/globals/DefaultProps.tsx +++ b/docs/src/pages/customization/globals/DefaultProps.tsx @@ -1,8 +1,8 @@ import 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({ props: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/GlobalCss.js b/docs/src/pages/customization/globals/GlobalCss.js index 68ecc0ba197fb7..1f1eb467cb946e 100644 --- a/docs/src/pages/customization/globals/GlobalCss.js +++ b/docs/src/pages/customization/globals/GlobalCss.js @@ -1,8 +1,8 @@ import 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({ overrides: { // Style sheet name ⚛️ MuiButton: { diff --git a/docs/src/pages/customization/globals/GlobalCss.tsx b/docs/src/pages/customization/globals/GlobalCss.tsx index 68ecc0ba197fb7..1f1eb467cb946e 100644 --- a/docs/src/pages/customization/globals/GlobalCss.tsx +++ b/docs/src/pages/customization/globals/GlobalCss.tsx @@ -1,8 +1,8 @@ import 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({ overrides: { // Style sheet name ⚛️ MuiButton: { diff --git a/docs/src/pages/customization/globals/globals-de.md b/docs/src/pages/customization/globals/globals-de.md index 13a9e433b8c75c..42116c80dccc5e 100644 --- a/docs/src/pages/customization/globals/globals-de.md +++ b/docs/src/pages/customization/globals/globals-de.md @@ -7,7 +7,7 @@ Wenn die Konfigurationsvariablen nicht ausreichen, können Sie die Vorteile der `overrides` Schlüssel des `Theme` verwenden, um potenziell jeden einzelnen von Material-UI in den DOM eingefügten **Stil** zu ändern. Das ist eine sehr mächtige Funktion. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Style sheet name ⚛️ MuiButton: { @@ -30,7 +30,7 @@ Die Liste dieser Anpassungspunkte für jede Komponente ist unter der **Komponent If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. Zum Beispiel: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( Sie können die Standard-Eigenschaften aller Komponenten der Material-UI ändern. A `props` key is exposed in the `theme` for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name der Komponente ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals-es.md b/docs/src/pages/customization/globals/globals-es.md index 1203a41cc2ee9d..96d8df1b0f10a8 100644 --- a/docs/src/pages/customization/globals/globals-es.md +++ b/docs/src/pages/customization/globals/globals-es.md @@ -7,7 +7,7 @@ When the configuration variables aren't powerful enough, you can take advantage of the `overrides` key of the `theme` to potentially change **every single style** injected by Material-UI into the DOM. That's a really powerful feature. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Style sheet name ⚛️ MuiButton: { @@ -30,7 +30,7 @@ The list of these customization points for each component is documented under th If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. Por ejemplo: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( You can change the default props of all the Material-UI components. A `props` key is exposed in the `theme` for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals-fr.md b/docs/src/pages/customization/globals/globals-fr.md index d73337ced1d163..17eb97294a8dc8 100644 --- a/docs/src/pages/customization/globals/globals-fr.md +++ b/docs/src/pages/customization/globals/globals-fr.md @@ -7,7 +7,7 @@ When the configuration variables aren't powerful enough, you can take advantage of the `overrides` key of the `theme` to potentially change **every single style** injected by Material-UI into the DOM. That's a really powerful feature. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Style sheet name ⚛️ MuiButton: { @@ -30,7 +30,7 @@ The list of these customization points for each component is documented under th If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. Par exemple: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( You can change the default props of all the Material-UI components. A `props` key is exposed in the `theme` for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals-ja.md b/docs/src/pages/customization/globals/globals-ja.md index eb3272858bc629..95fdbd6ec6203d 100644 --- a/docs/src/pages/customization/globals/globals-ja.md +++ b/docs/src/pages/customization/globals/globals-ja.md @@ -7,7 +7,7 @@ 設定変数が十分に強力でない場合は、 `theme` のキーを`overrides し、Material-UIによってDOMに注入される**every single style**を変更できるようにします。 それは本当に強力な機能です。 それは本当に強力な機能です。 それは本当に強力な機能です。 それは本当に強力な機能です。 それは本当に強力な機能です。 ```js -const theme = createMuiTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! }, +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! }, }, }); ``` @@ -21,7 +21,7 @@ const theme = createMuiTheme({ props: { // Name of the component ⚛️ MuiButto If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. 例えば： ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -44,10 +44,10 @@ return ( ## Default props -const theme = createMuiTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! }, }, }); +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! }, }, }); ```js -const theme = createMuiTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application 💣! }, }, }); diff --git a/docs/src/pages/customization/globals/globals-pt.md b/docs/src/pages/customization/globals/globals-pt.md index 05c0e5e82306e5..d72e3ca0ce5f6f 100644 --- a/docs/src/pages/customization/globals/globals-pt.md +++ b/docs/src/pages/customization/globals/globals-pt.md @@ -7,7 +7,7 @@ Quando as variáveis de configuração não são poderosas o suficiente, você pode tirar vantagem com o `overrides`, chave do `theme` para potencialmente alterar **cada estilo único** injetado por Material-UI no DOM. Esse é um recurso realmente poderoso. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Nome da folha de estilo ⚛️ MuiButton: { @@ -30,7 +30,7 @@ A lista desses pontos de customização de cada componente está documentada na Se você estiver usando o componente [CssBaseline](/components/css-baseline/) para aplicar o reset global, ele pode também ser usado para aplicação de estilos globais. Por exemplo: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( Você pode alterar as propriedades padrão de todos os componentes de Material-UI. A chave `props` é exposta no `theme` para estas situações de uso. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Nome do componente ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals-ru.md b/docs/src/pages/customization/globals/globals-ru.md index 501c0ef5a73b28..519393b02745cd 100644 --- a/docs/src/pages/customization/globals/globals-ru.md +++ b/docs/src/pages/customization/globals/globals-ru.md @@ -7,7 +7,7 @@ Если настроек конфигурации недостаточно, можно использовать ключ `overrides` у объекта `theme`, чтобы изменить **абсолютно любой стиль**, который Material-UI вносит в DOM. Это действительно мощная штука. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Style sheet name ⚛️ MuiButton: { @@ -30,7 +30,7 @@ const theme = createMuiTheme({ If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. Например: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( Вы можете изменить свойство props любой из компонент Material-UI. A `props` key is exposed in the `theme` for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Название компоненты MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals-zh.md b/docs/src/pages/customization/globals/globals-zh.md index 4f84046c807931..0e637832954382 100644 --- a/docs/src/pages/customization/globals/globals-zh.md +++ b/docs/src/pages/customization/globals/globals-zh.md @@ -7,7 +7,7 @@ 当配置变量不够强大的时候，您可以使用 `theme` 的 `overrides` 键来尽可能的改变 Material-UI 注入 DOM 的 **每一个样式**。 这是一个十分有效的功能。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // 样式表的名字 ⚛️ MuiButton: { @@ -30,7 +30,7 @@ const theme = createMuiTheme({ 如果您使用 [CssBaseline](/components/css-baseline/) 组件来应用全局重置（global resets），那么也可以将它应用于全局样式。 就像这样： ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -56,7 +56,7 @@ return ( 您可以更改所有 Material-UI 组件的默认属性。 在以下用例中，`theme` 公开了一个 `props` 键（key）。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // 组件的名称 ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/globals/globals.md b/docs/src/pages/customization/globals/globals.md index a4b1ca68702728..037cdfcc285518 100644 --- a/docs/src/pages/customization/globals/globals.md +++ b/docs/src/pages/customization/globals/globals.md @@ -9,7 +9,7 @@ When the configuration variables aren't powerful enough, you can take advantage That's a really powerful feature. ```js -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // Style sheet name ⚛️ MuiButton: { @@ -34,7 +34,7 @@ Alternatively, you can always have a look at the [implementation](https://github If you are using the [CssBaseline](/components/css-baseline/) component to apply global resets, it can also be used to apply global styles. For instance: ```jsx -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -61,7 +61,7 @@ You can change the default props of all the Material-UI components. A `props` key is exposed in the `theme` for this use case. ```js -const theme = createMuiTheme({ +const theme = createTheme({ props: { // Name of the component ⚛️ MuiButtonBase: { diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index bb959b755ae2f9..5c8b66d29283b5 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -1,7 +1,7 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles, ThemeProvider, useTheme, createTheme } from '@material-ui/core/styles'; const useStyles = makeStyles((theme) => ({ root: { @@ -84,8 +84,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. type: 'dark', diff --git a/docs/src/pages/customization/palette/Palette.js b/docs/src/pages/customization/palette/Palette.js index 07e348fb908c3f..72de7886da4e60 100644 --- a/docs/src/pages/customization/palette/Palette.js +++ b/docs/src/pages/customization/palette/Palette.js @@ -1,10 +1,10 @@ import 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 07e348fb908c3f..72de7886da4e60 100644 --- a/docs/src/pages/customization/palette/Palette.tsx +++ b/docs/src/pages/customization/palette/Palette.tsx @@ -1,10 +1,10 @@ import 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-de.md b/docs/src/pages/customization/palette/palette-de.md index d239b41ceb30e5..e089cf61e9f783 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', }, @@ -144,7 +144,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -176,7 +176,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 `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -198,7 +198,7 @@ For instance, you can enable the dark mode automatically: ```jsx import 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() { @@ -206,7 +206,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-es.md b/docs/src/pages/customization/palette/palette-es.md index 08e0f1965f37aa..11178b28a7339e 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', }, @@ -144,7 +144,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -176,7 +176,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 `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -198,7 +198,7 @@ For instance, you can enable the dark mode automatically: ```jsx import 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() { @@ -206,7 +206,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-fr.md b/docs/src/pages/customization/palette/palette-fr.md index 89ead396072c16..1b06aee9532be1 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', }, @@ -144,7 +144,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -176,7 +176,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 `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -198,7 +198,7 @@ For instance, you can enable the dark mode automatically: ```jsx import 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() { @@ -206,7 +206,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-ja.md b/docs/src/pages/customization/palette/palette-ja.md index bde6ed039187a8..ce3661a174ad4d 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', }, @@ -138,7 +138,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -170,7 +170,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 `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -192,7 +192,7 @@ For instance, you can enable the dark mode automatically: ```jsx import 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() { @@ -200,7 +200,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-pt.md b/docs/src/pages/customization/palette/palette-pt.md index a8d4c04ee30603..5faa446db65a5e 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 customizadas, 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', }, @@ -138,7 +138,7 @@ const theme = createMuiTheme({ Se você estiver usando TypeScript, você também deverá usar a [extensão de módulos](/guides/typescript/#customization-of-theme) para que o tema aceite os valores acima. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -170,7 +170,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 `type: '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: { type: 'dark', }, @@ -192,7 +192,7 @@ Por exemplo, você pode ativar o modo escuro automaticamente: ```jsx import 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() { @@ -200,7 +200,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-ru.md b/docs/src/pages/customization/palette/palette-ru.md index 1d0d4c5cde9edf..b8e2e8212c6e91 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', }, @@ -144,7 +144,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -176,7 +176,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 `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -198,7 +198,7 @@ You can leverage this preference dynamically with the [useMediaQuery](/component ```jsx import 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() { @@ -206,7 +206,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette-zh.md b/docs/src/pages/customization/palette/palette-zh.md index 1aa69565f10781..dc757266c10121 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({ 如果您希望提供更多的定制颜色，您也可以创建自己的颜色对象，或者直接为部分或全部的图谱使用的键（key）提供颜色。 ```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 中进行计算， @@ -121,9 +121,9 @@ type PaletteTonalOffset = number | { 您可以在主题的调色板内外添加新的颜色，如下所示： ```js -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ status: { danger: '#e53e3e', }, @@ -138,7 +138,7 @@ const theme = createMuiTheme({ 如果您正在使用 TypeScript，您也需要使用[module augmentation](/guides/typescript/#customization-of-theme) 来接受上述值。 ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -170,7 +170,7 @@ declare module "@material-ui/core/styles/createPalette" { 材质界面有两种调色板的类型，亮色（light）（默认值）和 暗色（dark）模式。 您可以通过设置 `type: 'dark'` 来运用暗色主题。 虽然它只是一个单一属性值的变化，但是在内部修改了些许调色板值。 ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -192,7 +192,7 @@ const darkTheme = createMuiTheme({ ```jsx import 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() { @@ -200,7 +200,7 @@ function App() { const theme = React.useMemo( () => - createMuiTheme({ + createTheme({ palette: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index 25128a462c6421..4f50dcbc52d36a 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -56,10 +56,10 @@ The simplest way to customize an intention is to import one or more of the provi 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, }, @@ -72,9 +72,9 @@ If you wish to provide more customized colors, you can either create your own co 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, @@ -132,9 +132,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', }, @@ -149,7 +149,7 @@ const theme = createMuiTheme({ If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. ```ts -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: React.CSSProperties['color'], @@ -183,7 +183,7 @@ You can make the theme dark by setting `type: 'dark'`. While it's only a single property value change, internally it modifies several palette values. ```js -const darkTheme = createMuiTheme({ +const darkTheme = createTheme({ palette: { type: 'dark', }, @@ -206,7 +206,7 @@ For instance, you can enable the dark mode automatically: ```jsx import 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: { type: prefersDarkMode ? 'dark' : 'light', }, diff --git a/docs/src/pages/customization/spacing/spacing-de.md b/docs/src/pages/customization/spacing/spacing-de.md index b9dd96a2052cd3..29aa9dff20d595 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 ``` @@ -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 - 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 ad289aafad35ad..8b9a6e3ba745a2 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 ``` @@ -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 - una función ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0. 5 * factor}rem`, // (estrategia de Bootstrap) }); @@ -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 4738a393477903..0959cfad7af9a3 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 ``` @@ -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 - 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 e5e4862cf167e8..281e8ef4f25c00 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 ``` @@ -17,7 +17,7 @@ theme.spacing(2) // = 8 * 2 - a number ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2) // = 4 * 2 - 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 61d058b861c376..ca2480647344b2 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 ``` @@ -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 - 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 fe370ccf5845f9..3f4037a41e99d5 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 ``` @@ -17,7 +17,7 @@ theme.spacing(2) // = 8 * 2 - число ```js -const theme = createMuiTheme ({ +const theme = createTheme ({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing (2) // = 4 * 2 - функция ```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 e65c500edf6a4b..e8d401d87e0ebc 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 ``` @@ -17,7 +17,7 @@ theme.spacing(2) // = 8 * 2 - 一个数字 ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: 4, }); @@ -27,7 +27,7 @@ theme.spacing(2) // = 4 * 2 - 一个函数 ```js -const theme = createMuiTheme({ +const theme = createTheme({ spacing: factor => `${0.25 * factor}rem`, // （Bootstrap 的策略） }); @@ -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 a1b0cd9e8dcf37..9d49e1984a5699 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 ``` @@ -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 - 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/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js index 7f7b07eb90ed35..8ed75a2ae6f342 100644 --- a/docs/src/pages/customization/theming/CustomStyles.js +++ b/docs/src/pages/customization/theming/CustomStyles.js @@ -1,6 +1,6 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; -import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; const useStyles = makeStyles((theme) => ({ @@ -27,7 +27,7 @@ function CustomCheckbox() { ); } -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 26f65e361fc0c8..0697832962a9d5 100644 --- a/docs/src/pages/customization/theming/CustomStyles.tsx +++ b/docs/src/pages/customization/theming/CustomStyles.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { - createMuiTheme, + createTheme, makeStyles, createStyles, Theme as AugmentedTheme, @@ -9,13 +9,13 @@ import { } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; -declare module '@material-ui/core/styles/createMuiTheme' { +declare module '@material-ui/core/styles/createTheme' { interface Theme { status: { danger: string; }; } - // allow configuration using `createMuiTheme` + // allow configuration using `createTheme` interface ThemeOptions { status?: { danger?: string; @@ -49,7 +49,7 @@ function CustomCheckbox() { ); } -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 a9935ab2471d48..4d93f443c85ecd 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.js +++ b/docs/src/pages/customization/theming/ThemeNesting.js @@ -1,9 +1,9 @@ import 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 a9935ab2471d48..4d93f443c85ecd 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.tsx +++ b/docs/src/pages/customization/theming/ThemeNesting.tsx @@ -1,9 +1,9 @@ import 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 a834f1e806a85b..adc6455721b0d2 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.js +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.js @@ -1,9 +1,9 @@ import 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 013944efb4fe4e..95b3809d28308a 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx @@ -1,9 +1,9 @@ import 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 fcf574147d12b8..ac13a12cb84599 100644 --- a/docs/src/pages/customization/theming/theming-de.md +++ b/docs/src/pages/customization/theming/theming-de.md @@ -56,7 +56,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. @@ -72,11 +72,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], @@ -109,9 +109,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 fee1a281255ed8..79f4d7c22461cb 100644 --- a/docs/src/pages/customization/theming/theming-es.md +++ b/docs/src/pages/customization/theming/theming-es.md @@ -56,7 +56,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. @@ -72,11 +72,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], @@ -109,9 +109,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 59f42e9e37ee13..bd8e318821188f 100644 --- a/docs/src/pages/customization/theming/theming-fr.md +++ b/docs/src/pages/customization/theming/theming-fr.md @@ -56,7 +56,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. @@ -72,11 +72,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], @@ -109,9 +109,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 c1b91586e1387f..cf3fccc31ae5f1 100644 --- a/docs/src/pages/customization/theming/theming-ja.md +++ b/docs/src/pages/customization/theming/theming-ja.md @@ -56,7 +56,7 @@ Otherwise you'll encounter `Error: Function component cannot be given refs`. See ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` 受け取ったオプションに基づいてテーマを生成します。 @@ -72,11 +72,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], @@ -109,9 +109,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 826cdf497cf512..f9b1cf90dfacd5 100644 --- a/docs/src/pages/customization/theming/theming-pt.md +++ b/docs/src/pages/customization/theming/theming-pt.md @@ -56,7 +56,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. @@ -72,11 +72,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], @@ -109,9 +109,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 ec23f430ad6516..8979fde7ad23e1 100644 --- a/docs/src/pages/customization/theming/theming-ru.md +++ b/docs/src/pages/customization/theming/theming-ru.md @@ -56,7 +56,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. @@ -72,11 +72,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], @@ -109,9 +109,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 44a7436eac0ff3..fbb8031746c593 100644 --- a/docs/src/pages/customization/theming/theming-zh.md +++ b/docs/src/pages/customization/theming/theming-zh.md @@ -56,7 +56,7 @@ ## API -### `createMuiTheme(options, ...args) => theme` +### `createTheme(options, ...args) => theme` 通过接收的选项生成一个主题基础。 @@ -72,11 +72,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], @@ -109,9 +109,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 2907ae943aee35..efdfeff256a80e 100644 --- a/docs/src/pages/customization/theming/theming.md +++ b/docs/src/pages/customization/theming/theming.md @@ -62,7 +62,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. @@ -78,11 +78,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], @@ -118,9 +118,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/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js index 787a5d55b64eb1..44c83b63adc80b 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js @@ -1,8 +1,8 @@ import 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 787a5d55b64eb1..44c83b63adc80b 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx @@ -1,8 +1,8 @@ import 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 2ef9540b5e940c..0e66bde3cecfe1 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.js +++ b/docs/src/pages/customization/typography/FontSizeTheme.js @@ -1,8 +1,8 @@ import 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 2ef9540b5e940c..0e66bde3cecfe1 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.tsx +++ b/docs/src/pages/customization/typography/FontSizeTheme.tsx @@ -1,8 +1,8 @@ import 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 23d8338fbfae3e..7499c695bc8714 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js @@ -1,8 +1,8 @@ import React from 'react'; -import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; +import { 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 23d8338fbfae3e..7499c695bc8714 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; +import { 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 b635a27d161335..e0503393fab386 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js @@ -3,7 +3,7 @@ import React from 'react'; // bundle size and module duplication is negligible /* eslint-disable-next-line no-restricted-imports */ import { convertLength } from '@material-ui/core/styles/cssUtils'; -import { makeStyles, createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { makeStyles, createTheme, responsiveFontSizes } from '@material-ui/core/styles'; import { Legend, Tooltip, @@ -15,7 +15,7 @@ import { ResponsiveContainer, } from 'recharts'; -let theme = createMuiTheme(); +let theme = createTheme(); theme = responsiveFontSizes(theme); const colors = ['#443dc2', '#2060df', '#277e91', '#378153', '#4d811d', '#63780d', '#996600']; diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js index 26a48739646398..2077b30300f08c 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.js +++ b/docs/src/pages/customization/typography/TypographyVariants.js @@ -1,9 +1,9 @@ import 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 26a48739646398..2077b30300f08c 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.tsx +++ b/docs/src/pages/customization/typography/TypographyVariants.tsx @@ -1,9 +1,9 @@ import 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 a7973ffbd60977..0a49ba63e44b4d 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, diff --git a/docs/src/pages/customization/typography/typography-es.md b/docs/src/pages/customization/typography/typography-es.md index 63eaf3c911e171..2b6af5f1be8f07 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 Para instanciar, este demo usa el sistema de fuente 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 propeidades tipograficas variantes mapean dierctamente hacia el 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. 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, diff --git a/docs/src/pages/customization/typography/typography-fr.md b/docs/src/pages/customization/typography/typography-fr.md index 72ea87f40b414a..94065477c3b0cb 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, diff --git a/docs/src/pages/customization/typography/typography-ja.md b/docs/src/pages/customization/typography/typography-ja.md index 658dbb5f8c8418..f8a4019597c88a 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({ Typographyバリアント型プロパティは、生成されたCSSに直接マップされます。 [media queries](/customization/breakpoints/#api) を使用できます： 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, diff --git a/docs/src/pages/customization/typography/typography-pt.md b/docs/src/pages/customization/typography/typography-pt.md index b098f5b39a6bd4..9aa104ae6ba0f0 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 estas situações, 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, diff --git a/docs/src/pages/customization/typography/typography-ru.md b/docs/src/pages/customization/typography/typography-ru.md index a2f80c28422c3f..5519ed21a30a21 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, diff --git a/docs/src/pages/customization/typography/typography-zh.md b/docs/src/pages/customization/typography/typography-zh.md index a64b530bb4735b..a0bf68c6e8160e 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({ 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 = { 您可以在下面的示例中看到这个操作。 请尝试调整浏览器的窗口大小，您可以注意到当切换到不同的 [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); 这样的情况下，我们提供了一个 `htmlFontsize` 主题属性，它可以告知 Material-UI 此 `` 元素的具体字体大小。 这可以用于调整 `rem` 值，如此一来计算后的 font-size 总是与规范相符合。 ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { // 告知 Material-UI 此 html 元素的具体字体大小。 htmlFontSize: 10, @@ -185,7 +185,7 @@ html { 每个变体都可以被单独地定制： ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { subtitle1: { fontSize: 12, diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md index ca1a12381341ff..7ca7e9b873b626 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 demo uses the system font instead of the default Roboto font: ```js -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: [ '-apple-system', @@ -57,7 +57,7 @@ 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', }, @@ -91,7 +91,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. @@ -112,7 +112,7 @@ 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', @@ -134,9 +134,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); ``` @@ -157,7 +157,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, @@ -196,7 +196,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, diff --git a/docs/src/pages/getting-started/faq/faq-de.md b/docs/src/pages/getting-started/faq/faq-de.md index fd2f6e184b4bc6..df3a93ceb34df0 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({ overrides: { // 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 05854dc0d9c29a..158ba63c65f4fa 100644 --- a/docs/src/pages/getting-started/faq/faq-es.md +++ b/docs/src/pages/getting-started/faq/faq-es.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({ overrides: { // 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 639c7a51acb55d..e27e083784bac1 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({ overrides: { // 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 b356ae6b2d3d44..d9cf17ba9f21e9 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({ overrides: { // 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 b63844b4af4530..b385c59caffa19 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({ overrides: { // Nome do componente ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq-ru.md b/docs/src/pages/getting-started/faq/faq-ru.md index 1ce95d8986f6ec..68c16e5f2352f6 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({ overrides: { // 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 43ea74144b2c98..b9e24917b678c1 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({ props: { // 组件的名字 ⚛️ MuiButtonBase: { @@ -62,9 +62,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', @@ -77,9 +77,9 @@ const theme = createMuiTheme({ 您可以更进一步地禁用所有的过渡和动画效果。 ```js -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -const theme = createMuiTheme({ +const theme = createTheme({ overrides: { // 组件名称 ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 54f0045ba08458..a457da801c2f16 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({ props: { // Name of the component ⚛️ MuiButtonBase: { @@ -71,9 +71,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', @@ -86,9 +86,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({ overrides: { // Name of the component ⚛️ MuiCssBaseline: { diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 113fec183cbf07..6ae3eca4077f53 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -2,13 +2,9 @@ import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; import { ThemeProvider } from 'emotion-theming'; -import { - createMuiTheme, - ThemeProvider as MuiThemeProvider, - darken, -} from '@material-ui/core/styles'; +import { createTheme, ThemeProvider as MuiThemeProvider, darken } from '@material-ui/core/styles'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#6772e5', diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx index 113fec183cbf07..6ae3eca4077f53 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -2,13 +2,9 @@ import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; import { ThemeProvider } from 'emotion-theming'; -import { - createMuiTheme, - ThemeProvider as MuiThemeProvider, - darken, -} from '@material-ui/core/styles'; +import { createTheme, ThemeProvider as MuiThemeProvider, darken } from '@material-ui/core/styles'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#6772e5', diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 562b4ef9c31590..7213f45f4ed4f3 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,14 +1,10 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { - createMuiTheme, - ThemeProvider as MuiThemeProvider, - darken, -} from '@material-ui/core/styles'; +import { createTheme, ThemeProvider as MuiThemeProvider, darken } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#6772e5', diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 562b4ef9c31590..7213f45f4ed4f3 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,14 +1,10 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { - createMuiTheme, - ThemeProvider as MuiThemeProvider, - darken, -} from '@material-ui/core/styles'; +import { createTheme, ThemeProvider as MuiThemeProvider, darken } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const customTheme = createMuiTheme({ +const customTheme = createTheme({ palette: { primary: { main: '#6772e5', diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index 0d165c4a07c486..339f17be5bb766 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -4,7 +4,7 @@ import Pagination from '@material-ui/lab/Pagination'; import Rating from '@material-ui/lab/Rating'; import Autocomplete from '@material-ui/lab/Autocomplete'; 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])}> + createTheme(outerTheme, locales[locale])}> `${key.substring(0, 2)}-${key.substring(2, 4)}`} diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx index 3218585ef22f9c..f38bbdc9fc84ab 100644 --- a/docs/src/pages/guides/localization/Locales.tsx +++ b/docs/src/pages/guides/localization/Locales.tsx @@ -4,7 +4,7 @@ import Pagination from '@material-ui/lab/Pagination'; import Rating from '@material-ui/lab/Rating'; import Autocomplete from '@material-ui/lab/Autocomplete'; 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'; type SupportedLocales = keyof typeof locales; @@ -14,7 +14,7 @@ export default function Locales() { return (
- createMuiTheme(outerTheme, locales[locale])}> + createTheme(outerTheme, locales[locale])}> `${key.substring(0, 2)}-${key.substring(2, 4)}`} diff --git a/docs/src/pages/guides/localization/localization-de.md b/docs/src/pages/guides/localization/localization-de.md index d7107c26087854..800c4e78ef621f 100644 --- a/docs/src/pages/guides/localization/localization-de.md +++ b/docs/src/pages/guides/localization/localization-de.md @@ -9,10 +9,10 @@ The default locale of Material-UI is English (United States). If you want to use Use the theme to configure the locale text globally: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-es.md b/docs/src/pages/guides/localization/localization-es.md index 1d81c4dc9cfd04..66fa3f1375525d 100644 --- a/docs/src/pages/guides/localization/localization-es.md +++ b/docs/src/pages/guides/localization/localization-es.md @@ -9,10 +9,10 @@ La localización predeterminada de Material-UI es Inglés (Estados Unidos). Si q Utilice el tema para configurar el texto regional globalmente: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-fr.md b/docs/src/pages/guides/localization/localization-fr.md index 73bb1d934b66d8..2b0e6c0e1ec09d 100644 --- a/docs/src/pages/guides/localization/localization-fr.md +++ b/docs/src/pages/guides/localization/localization-fr.md @@ -9,10 +9,10 @@ The default locale of Material-UI is English (United States). If you want to use Use the theme to configure the locale text globally: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-ja.md b/docs/src/pages/guides/localization/localization-ja.md index 82cf8e55fb1a4c..4bc5949d026ebb 100644 --- a/docs/src/pages/guides/localization/localization-ja.md +++ b/docs/src/pages/guides/localization/localization-ja.md @@ -9,10 +9,10 @@ The default locale of Material-UI is English (United States). If you want to use Use the theme to configure the locale text globally: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-pt.md b/docs/src/pages/guides/localization/localization-pt.md index 7f7791a2a50c35..08e5d9d5124900 100644 --- a/docs/src/pages/guides/localization/localization-pt.md +++ b/docs/src/pages/guides/localization/localization-pt.md @@ -9,10 +9,10 @@ A localidade padrão do Material-UI é em inglês (Estados Unidos). Se você qui Use o tema para configurar os textos da localização globalmente: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-ru.md b/docs/src/pages/guides/localization/localization-ru.md index a098a10a50c51e..1eebdcab81cea0 100644 --- a/docs/src/pages/guides/localization/localization-ru.md +++ b/docs/src/pages/guides/localization/localization-ru.md @@ -9,10 +9,10 @@ The default locale of Material-UI is English (United States). If you want to use Use the theme to configure the locale text globally: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization-zh.md b/docs/src/pages/guides/localization/localization-zh.md index b77ab92c6702ec..45d6d1e58b7465 100644 --- a/docs/src/pages/guides/localization/localization-zh.md +++ b/docs/src/pages/guides/localization/localization-zh.md @@ -9,10 +9,10 @@ Material-UI 的默认语言环境是 English（United States）。 如果您想 使用 theme 来全局地配置语言环境文本： ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index e9ecb5b7648256..2dd16fb93aa217 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -9,10 +9,10 @@ The default locale of Material-UI is English (United States). If you want to use Use the theme to configure the locale text globally: ```jsx -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: { main: '#1976d2' }, }, diff --git a/docs/src/pages/guides/right-to-left/Direction.js b/docs/src/pages/guides/right-to-left/Direction.js index 484386e1cc612a..260b485f7309b2 100644 --- a/docs/src/pages/guides/right-to-left/Direction.js +++ b/docs/src/pages/guides/right-to-left/Direction.js @@ -1,8 +1,8 @@ import 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/Direction.tsx b/docs/src/pages/guides/right-to-left/Direction.tsx index 484386e1cc612a..260b485f7309b2 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 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/right-to-left-de.md b/docs/src/pages/guides/right-to-left/right-to-left-de.md index 2c46c943be5102..b7797d32920f17 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 cd1c1a8ad3f155..7869438ba0fea1 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 4ddf37e47a8899..5c165af5207e2b 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 d9e7ff7af01c7b..b548f71a5b782a 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 c6cf23487062d4..bc3b854e070f6e 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 6fb42cfa140b34..052c96cd139540 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 d355b1eeb477ba..c894463f6cbd94 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 4485d864b0e6c8..82144fbca24b9c 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 @@ -15,7 +15,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/server-rendering/server-rendering-de.md b/docs/src/pages/guides/server-rendering/server-rendering-de.md index ac4c4c10281a71..d98cf3527cc073 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 c078fc460c355f..4d41ddc7b77401 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 4b99f1bbd333ca..1e4ad52f45ea3f 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 e2b9fbf0fc5ab2..016634bafc5a4b 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 694cf690f312b9..0dd9a05d98f513 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 b8e1e1b78e65b4..47019d0bfd8456 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 2a0b01d103f308..f91eefa196e2a8 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 89ffda1a0c7c58..38149aeaf28203 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 51bc5185c1a833..7c02832fc47ae6 100644 --- a/docs/src/pages/guides/typescript/typescript-de.md +++ b/docs/src/pages/guides/typescript/typescript-de.md @@ -213,17 +213,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'] @@ -238,10 +238,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 1d367c3a9a3e2d..667db994936fa1 100644 --- a/docs/src/pages/guides/typescript/typescript-es.md +++ b/docs/src/pages/guides/typescript/typescript-es.md @@ -211,17 +211,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'] @@ -236,10 +236,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 2be1af5b20f4cb..220be9c8af2f78 100644 --- a/docs/src/pages/guides/typescript/typescript-fr.md +++ b/docs/src/pages/guides/typescript/typescript-fr.md @@ -211,17 +211,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'] @@ -236,10 +236,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 a7ad60edbcf68b..1b75e319c5830b 100644 --- a/docs/src/pages/guides/typescript/typescript-ja.md +++ b/docs/src/pages/guides/typescript/typescript-ja.md @@ -211,17 +211,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'] @@ -236,10 +236,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 4e95ffb82e474b..4149fb04c7634a 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 1d367c3a9a3e2d..667db994936fa1 100644 --- a/docs/src/pages/guides/typescript/typescript-ru.md +++ b/docs/src/pages/guides/typescript/typescript-ru.md @@ -211,17 +211,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'] @@ -236,10 +236,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 6b43fb26953e34..82ea16f3502ba6 100644 --- a/docs/src/pages/guides/typescript/typescript-zh.md +++ b/docs/src/pages/guides/typescript/typescript-zh.md @@ -216,17 +216,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'] @@ -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.md b/docs/src/pages/guides/typescript/typescript.md index 34b40d09312f6a..7b44002a844a18 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -220,17 +220,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'] @@ -244,10 +244,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 8800950bd73ca9..c9d867607dc055 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/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index d70b8a4163f049..09084007112955 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -1,6 +1,6 @@ import 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'; @@ -22,7 +22,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 e165251f021189..eb14c0f063045d 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { - createMuiTheme, + createTheme, createStyles, ThemeProvider, withStyles, @@ -27,7 +27,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 289e853d41f60e..9f24e00be83bcd 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 507e8811058c68..d5e05c95a2e423 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 1d16f48a66173d..48d8173b38cbf8 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 3407243bf377ba..6422549054283d 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. 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-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md index d53c268496ecc3..bc1de83cf3b456 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 22241fd9a18e3b..07d30df099baee 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()` который обеспечивает более обширную структуру темы. Зайдите в раздел [темы](/customization/theming/), чтобы научиться создавать свою собственную Material-UI тему. +> Этот пример создает объект темы для пользовательских компонентов. Если вы собираетесь использовать какие-либо компоненты Material-UI, вам необходимо использовать метод `createTheme()` который обеспечивает более обширную структуру темы. Зайдите в раздел [темы](/customization/theming/), чтобы научиться создавать свою собственную Material-UI тему. ```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 f1e27cc33a6eb6..d98d72174f57c3 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()` 方法来提供一个更丰富的主题结构。 有关如何自定义 Material-UI 主题的信息，请参见 [主题部分](/customization/theming/)。 +> 此示例为自定义组件创建了一个主题对象（theme object）。 如果你想要使用 Material-UI 的部分组件，那么则需要通过使用 `createTheme()` 方法来提供一个更丰富的主题结构。 有关如何自定义 Material-UI 主题的信息，请参见 [主题部分](/customization/theming/)。 ```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 85e2b53acbc598..97284bd7513bbb 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 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/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js index db049102bfa0a5..f35cc7e214ad88 100644 --- a/docs/src/pages/system/basics/Demo.js +++ b/docs/src/pages/system/basics/Demo.js @@ -1,13 +1,13 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { palette, spacing, typography } from '@material-ui/system'; const Box = styled.div`${palette}${spacing}${typography}`; // or import Box from '@material-ui/core/Box'; -const theme = createMuiTheme(); +const theme = createTheme(); export default function Demo() { return ( diff --git a/docs/src/pages/system/basics/Demo.tsx b/docs/src/pages/system/basics/Demo.tsx index bb960f4162541f..24cc292d3bce8f 100644 --- a/docs/src/pages/system/basics/Demo.tsx +++ b/docs/src/pages/system/basics/Demo.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { palette, PaletteProps, @@ -16,7 +16,7 @@ const Box = styled.div< >`${palette}${spacing}${typography}`; // or import Box from '@material-ui/core/Box'; -const theme = createMuiTheme(); +const theme = createTheme(); export default function Demo() { return ( diff --git a/docs/src/pages/system/basics/SxProp.js b/docs/src/pages/system/basics/SxProp.js index a8f57033d4f588..231d7926bff4ef 100644 --- a/docs/src/pages/system/basics/SxProp.js +++ b/docs/src/pages/system/basics/SxProp.js @@ -1,14 +1,14 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { compose, spacing, palette, styleFunctionSx } from '@material-ui/system'; const styleFunction = styleFunctionSx(compose(spacing, palette)); const Box = styled.div(styleFunction); -const theme = createMuiTheme(); +const theme = createTheme(); export default function CssProp() { return ( diff --git a/docs/src/pages/system/basics/SxProp.tsx b/docs/src/pages/system/basics/SxProp.tsx index 4ae653c39e2279..c146d4319cc9bd 100644 --- a/docs/src/pages/system/basics/SxProp.tsx +++ b/docs/src/pages/system/basics/SxProp.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { compose, spacing, @@ -24,7 +24,7 @@ type BoxProps = StyleFunctionProps & { const Box = styled.div(styleFunction); -const theme = createMuiTheme(); +const theme = createTheme(); export default function CssProp() { return ( diff --git a/examples/cdn/index.html b/examples/cdn/index.html index 8d6d5af949f06e..00d23c50292eb3 100644 --- a/examples/cdn/index.html +++ b/examples/cdn/index.html @@ -23,14 +23,14 @@ Typography, Container, makeStyles, - createMuiTheme, + createTheme, Box, SvgIcon, Link, } = 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 f9c08b49759c16..19735b2d3866e0 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 red from '@material-ui/core/colors/red'; -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/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 f9e8c47d322cfc..711c16187a536d 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/red'; // 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 b9718a185ec676..d79f614584add3 100644 --- a/examples/preact/src/theme.js +++ b/examples/preact/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/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 4f30acd28f45d6..e21fcc87e5e576 100644 --- a/framer/Material-UI.framerfx/code/ThemeProvider.tsx +++ b/framer/Material-UI.framerfx/code/ThemeProvider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { addPropertyControls, ControlType } from 'framer'; // tslint:disable-next-line: ban-ts-ignore // @ts-ignore -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'; import { parseColor } from './utils/parseColor'; interface Props { @@ -38,7 +38,7 @@ export const Theme: React.SFC = (props: Props) => { ...other } = props; - const theme = createMuiTheme({ + const theme = createTheme({ palette: { type: paletteType, primary: { main: parseColor(primary) }, diff --git a/packages/material-ui-benchmark/src/server.js b/packages/material-ui-benchmark/src/server.js index a4d84955c3fbf3..92f6fe079eccee 100644 --- a/packages/material-ui-benchmark/src/server.js +++ b/packages/material-ui-benchmark/src/server.js @@ -3,7 +3,7 @@ import express from 'express'; import 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, @@ -40,7 +40,7 @@ function renderFullPage(html, css) { `; } -const theme = createMuiTheme({ +const theme = createTheme({ palette: { primary: green, accent: red, diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js index 8ed2b88d4f418a..0992db99365fce 100644 --- a/packages/material-ui-benchmark/src/system.js +++ b/packages/material-ui-benchmark/src/system.js @@ -6,7 +6,7 @@ import styledEmotion from '@emotion/styled'; import { ThemeProvider as EmotionTheme } from 'emotion-theming'; import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system'; import { spacing, palette, typography, compose } from '@material-ui/system'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { styleFunction } from '@material-ui/core/Box'; import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles'; import styledComponents, { @@ -31,9 +31,9 @@ const BoxEmotion = styledEmotion('div')(styleFunction); const BoxMaterialSystem = styledComponents('div')(materialSystem); const BoxStyledSystem = styledComponents('div')(styledSystem); -const materialSystemTheme = createMuiTheme(); +const materialSystemTheme = createTheme(); -const styledSystemTheme = createMuiTheme(); +const styledSystemTheme = createTheme(); styledSystemTheme.breakpoints = ['40em', '52em', '64em']; styledSystemTheme.colors = styledSystemTheme.palette; styledSystemTheme.fontSizes = styledSystemTheme.typography; diff --git a/packages/material-ui-codemod/README.md b/packages/material-ui-codemod/README.md index 97bfc8cf078db2..8506b92efd6996 100644 --- a/packages/material-ui-codemod/README.md +++ b/packages/material-ui-codemod/README.md @@ -51,8 +51,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 20bbe141a486d2..7f132a4aadc24a 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 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 6fd2fab600e881..ee8387cd302e2b 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 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/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index a3656c0174edf9..3b06c7717cc96a 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -6,7 +6,7 @@ import createMount from 'test/utils/createMount'; import describeConformance from 'test/utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; import Pagination from './Pagination'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; describe('', () => { let classes; @@ -56,7 +56,7 @@ describe('', () => { it('renders controls with correct order in rtl theme', () => { const { getAllByRole } = render( diff --git a/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts b/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts index 908f67a32b642d..033cc821fbbaa5 100644 --- a/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts +++ b/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts @@ -1,6 +1,6 @@ -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -createMuiTheme({ +createTheme({ overrides: { MuiAvatarGroup: { avatar: { diff --git a/packages/material-ui-lab/src/themeAugmentation/props.spec.ts b/packages/material-ui-lab/src/themeAugmentation/props.spec.ts index 1cfbc9e6496b79..ebea69a4eae721 100644 --- a/packages/material-ui-lab/src/themeAugmentation/props.spec.ts +++ b/packages/material-ui-lab/src/themeAugmentation/props.spec.ts @@ -1,6 +1,6 @@ -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; -createMuiTheme({ +createTheme({ props: { MuiAvatarGroup: { spacing: 'small', @@ -13,7 +13,7 @@ createMuiTheme({ // Ensure Autocomplete generics are loose const trueOrFalse = true as boolean; const val = '' as string | null | string[]; -createMuiTheme({ +createTheme({ props: { MuiAutocomplete: { multiple: trueOrFalse, diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index 7a3567bb43d8b4..c31edafe22b96c 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/createMount'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import createGenerateClassName from '../createGenerateClassName'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import makeStyles from './makeStyles'; @@ -186,7 +186,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' }); @@ -222,7 +222,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' }); }); @@ -260,7 +260,7 @@ describe('makeStyles', () => { mount( { const styles = { root: { display: 'flex' } }; const StyledComponent = withStyles(styles)(Empty); const wrapper = mount( - + @@ -107,7 +107,7 @@ describe('withStyles', () => { wrapper.update(); expect(sheetsRegistry.registry.length).to.equal(1); expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'Empty-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: 'Empty-root-2' }); @@ -143,7 +143,7 @@ describe('withStyles', () => { const wrapper = mount( { const wrapper = mount( { const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty); const wrapper = mount( - + @@ -199,7 +199,7 @@ describe('withStyles', () => { ); 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' }); }); @@ -210,7 +210,7 @@ describe('withStyles', () => { mount( { diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index 8458838ce8fec0..516594875bd806 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -8,7 +8,7 @@ import describeConformance from 'test/utils/describeConformance'; import Collapse from './Collapse'; import { ThemeProvider, - createMuiTheme, + createTheme, unstable_createMuiStrictModeTheme as createMuiStrictModeTheme, } from '@material-ui/core/styles'; import { Transition } from 'react-transition-group'; @@ -152,7 +152,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.spec.tsx b/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx index bc2c9feb638606..f089a265e2bb15 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx +++ b/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx @@ -1,10 +1,10 @@ -import { createMuiTheme } from '@material-ui/core'; +import { createTheme } from '@material-ui/core'; // overrides story { // reduced example from // https://github.com/mui-org/material-ui/blob/master/docs/src/pages/customization/typography/typography.md - createMuiTheme({ + createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -14,7 +14,7 @@ import { createMuiTheme } from '@material-ui/core'; }, }); // assuming "@global" is a class - createMuiTheme({ + createTheme({ overrides: { MuiCssBaseline: { '@global': { @@ -25,7 +25,7 @@ import { createMuiTheme } from '@material-ui/core'; }, }); // reset.css - createMuiTheme({ + createTheme({ overrides: { MuiCssBaseline: { '@global': { diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index e647049b5f42a4..4d9902e1cedbac 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -3,7 +3,7 @@ import { StandardProps } from '..'; import { ModalProps } from '../Modal'; import { SlideProps } from '../Slide'; import { PaperProps } from '../Paper'; -import { Theme } from '../styles/createMuiTheme'; +import { Theme } from '../styles/createTheme'; import { TransitionHandlerProps, TransitionProps } from '../transitions/transition'; export interface DrawerProps diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js index 5c98cf4504c87f..d203f7f3954ad8 100644 --- a/packages/material-ui/src/Drawer/Drawer.test.js +++ b/packages/material-ui/src/Drawer/Drawer.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { findOutermostIntrinsic, getClasses } from 'test/utils'; import createMount from 'test/utils/createMount'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import describeConformance from 'test/utils/describeConformance'; import Slide from '../Slide'; import Paper from '../Paper'; @@ -249,7 +249,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/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js index 2fd3cf4eae50df..23050257c28a89 100644 --- a/packages/material-ui/src/Grid/Grid.test.js +++ b/packages/material-ui/src/Grid/Grid.test.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import { createShallow, getClasses } from 'test/utils'; import createMount from 'test/utils/createMount'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import describeConformance from 'test/utils/describeConformance'; import Grid, { styles } from './Grid'; @@ -117,8 +117,8 @@ describe('', () => { describe('gutter', () => { it('should generate the right values', () => { - const defaultTheme = createMuiTheme(); - const remTheme = createMuiTheme({ + const defaultTheme = createTheme(); + const remTheme = createTheme({ spacing: (factor) => `${0.25 * factor}rem`, }); diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index 2f18a9fe238fb6..f46ba32cb27c4d 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { Omit } from '@material-ui/types'; -import { Theme } from '../styles/createMuiTheme'; +import { Theme } from '../styles/createTheme'; import { TransitionProps } from '../transitions/transition'; export interface GrowProps extends Omit { diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js index bd7e621b14e1be..49742af9224af6 100644 --- a/packages/material-ui/src/Grow/Grow.test.js +++ b/packages/material-ui/src/Grow/Grow.test.js @@ -5,7 +5,7 @@ import createMount from 'test/utils/createMount'; import describeConformance from 'test/utils/describeConformance'; import Grow from './Grow'; import { - createMuiTheme, + createTheme, ThemeProvider, unstable_createMuiStrictModeTheme as createMuiStrictModeTheme, } from '@material-ui/core/styles'; @@ -140,7 +140,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 69815822fe70c4..e718d9ab28b9f7 100644 --- a/packages/material-ui/src/Hidden/HiddenCss.test.js +++ b/packages/material-ui/src/Hidden/HiddenCss.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { createShallow, getClasses } from 'test/utils'; import createMount from 'test/utils/createMount'; import HiddenCss from './HiddenCss'; -import { createMuiTheme, MuiThemeProvider } from '../styles'; +import { createTheme, MuiThemeProvider } from '../styles'; import consoleErrorMock from 'test/utils/consoleErrorMock'; const Foo = () =>
bar
; @@ -91,7 +91,7 @@ describe('', () => { }); it('allows custom breakpoints', () => { - const theme = createMuiTheme({ breakpoints: { keys: ['xxl'] } }); + const theme = createTheme({ breakpoints: { keys: ['xxl'] } }); const wrapper = mount( diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index 74dda59748760c..d4831507d4edbf 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -5,7 +5,7 @@ import { useFakeTimers, spy } from 'sinon'; import PropTypes from 'prop-types'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import { createClientRender, fireEvent, within } from 'test/utils/createClientRender'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import createMount from 'test/utils/createMount'; import { ThemeProvider } from '@material-ui/styles'; import describeConformance from 'test/utils/describeConformance'; @@ -57,7 +57,7 @@ describe('', () => { }); it('should consume theme default props', () => { - const theme = createMuiTheme({ props: { MuiModal: { container } } }); + const theme = createTheme({ props: { MuiModal: { container } } }); render( diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js index 8ce93355e9581a..0288155d335ca8 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses } from 'test/utils'; import { createClientRender } from 'test/utils/createClientRender'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import NotchedOutline from './NotchedOutline'; describe('', () => { @@ -37,7 +37,7 @@ describe('', () => { it('should set alignment rtl', () => { const { container: container1 } = render( @@ -49,7 +49,7 @@ describe('', () => { const { container: container2 } = render( diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js index 6f337d4f249936..1684d04e3209d1 100644 --- a/packages/material-ui/src/Paper/Paper.test.js +++ b/packages/material-ui/src/Paper/Paper.test.js @@ -5,7 +5,7 @@ import createMount from 'test/utils/createMount'; import * as PropTypes from 'prop-types'; import describeConformance from 'test/utils/describeConformance'; import Paper from './Paper'; -import { createMuiTheme, ThemeProvider } from '../styles'; +import { createTheme, ThemeProvider } from '../styles'; import consoleErrorMock from 'test/utils/consoleErrorMock'; describe('', () => { @@ -55,7 +55,7 @@ describe('', () => { }); it('allows custom elevations via theme.shadows', () => { - const theme = createMuiTheme(); + const theme = createTheme(); theme.shadows.push('20px 20px'); const wrapper = mount( diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js index 47376aea4e5b5d..0d65cce9c79c0b 100644 --- a/packages/material-ui/src/Popper/Popper.test.js +++ b/packages/material-ui/src/Popper/Popper.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy, useFakeTimers } from 'sinon'; import PropTypes from 'prop-types'; import createMount from 'test/utils/createMount'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import describeConformance from 'test/utils/describeConformance'; import { createClientRender, fireEvent } from 'test/utils/createClientRender'; import consoleErrorMock from 'test/utils/consoleErrorMock'; @@ -22,7 +22,7 @@ describe('', () => { }; before(() => { - rtlTheme = createMuiTheme({ + rtlTheme = createTheme({ direction: 'rtl', }); }); diff --git a/packages/material-ui/src/Slide/Slide.d.ts b/packages/material-ui/src/Slide/Slide.d.ts index 1f25d0931037b8..ffb19243bd6270 100644 --- a/packages/material-ui/src/Slide/Slide.d.ts +++ b/packages/material-ui/src/Slide/Slide.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Theme } from '../styles/createMuiTheme'; +import { Theme } from '../styles/createTheme'; import { TransitionProps } from '../transitions/transition'; export interface SlideProps extends TransitionProps { diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js index 0b297e27c3e1e0..5771fad8f0805e 100644 --- a/packages/material-ui/src/Slide/Slide.test.js +++ b/packages/material-ui/src/Slide/Slide.test.js @@ -5,7 +5,7 @@ import createMount from 'test/utils/createMount'; import describeConformance from 'test/utils/describeConformance'; import Slide, { setTranslateValue } from './Slide'; import { - createMuiTheme, + createTheme, ThemeProvider, unstable_createMuiStrictModeTheme as createMuiStrictModeTheme, } from '@material-ui/core/styles'; @@ -42,7 +42,7 @@ describe('', () => {
, diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index d6d66686823f4d..924e2111bb1f11 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -5,7 +5,7 @@ import { expect } from 'chai'; import { getClasses } from 'test/utils'; import createMount from 'test/utils/createMount'; import describeConformance from 'test/utils/describeConformance'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createTheme } from '@material-ui/core/styles'; import { createClientRender, fireEvent } from 'test/utils/createClientRender'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import Slider from './Slider'; @@ -362,7 +362,7 @@ describe('', () => { it('should handle RTL', () => { const { getByRole } = render( @@ -450,7 +450,7 @@ describe('', () => { const handleChange = spy(); const { container, getByRole } = render( diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js index 5ac9e5fc241d71..6cb88cbdd459ac 100644 --- a/packages/material-ui/src/Tabs/Tabs.test.js +++ b/packages/material-ui/src/Tabs/Tabs.test.js @@ -10,7 +10,7 @@ import describeConformance from 'test/utils/describeConformance'; import capitalize from '../utils/capitalize'; import Tab from '../Tab'; import Tabs from './Tabs'; -import { createMuiTheme, ThemeProvider } from '../styles'; +import { createTheme, ThemeProvider } from '../styles'; function findScrollButton(container, direction) { return container.querySelector(`svg[data-mui-test="KeyboardArrow${capitalize(direction)}Icon"]`); @@ -715,7 +715,7 @@ describe('', () => { let wrapper; before(() => { - const theme = createMuiTheme({ direction }); + const theme = createTheme({ direction }); wrapper = ({ children }) => {children}; }); diff --git a/packages/material-ui/src/Zoom/Zoom.d.ts b/packages/material-ui/src/Zoom/Zoom.d.ts index ca1a5e1d5ce279..68a09367353a22 100644 --- a/packages/material-ui/src/Zoom/Zoom.d.ts +++ b/packages/material-ui/src/Zoom/Zoom.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Theme } from '../styles/createMuiTheme'; +import { Theme } from '../styles/createTheme'; import { TransitionProps } from '../transitions/transition'; export interface ZoomProps extends TransitionProps { diff --git a/packages/material-ui/src/styles/createMixins.spec.ts b/packages/material-ui/src/styles/createMixins.spec.ts index 0564d0fdab7ae1..b3877dfb7429fa 100644 --- a/packages/material-ui/src/styles/createMixins.spec.ts +++ b/packages/material-ui/src/styles/createMixins.spec.ts @@ -1,7 +1,7 @@ -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; +import { createTheme, makeStyles } from '@material-ui/core/styles'; { - const theme = createMuiTheme({ + const theme = createTheme({ mixins: { toolbar: { background: '#fff', diff --git a/packages/material-ui/src/styles/createMixins.test.js b/packages/material-ui/src/styles/createMixins.test.js index a785b083daa9bf..6822037253c5c6 100644 --- a/packages/material-ui/src/styles/createMixins.test.js +++ b/packages/material-ui/src/styles/createMixins.test.js @@ -1,11 +1,11 @@ import { expect } from 'chai'; import { consoleWarnMock } from 'test/utils/consoleErrorMock'; import createMixins from './createMixins'; -import createMuiTheme from './createMuiTheme'; +import createTheme from './createTheme'; describe('createMixins', () => { it('should be able to override the breakpoint', () => { - const theme = createMuiTheme(); + const theme = createTheme(); const mixins = createMixins(theme.breakpoints, theme.spacing, { test: { display: 'block' } }); expect(mixins.test).to.deep.equal({ display: 'block' }); @@ -21,7 +21,7 @@ describe('createMixins', () => { }); it('issues a warning for theme.mixins.gutters', () => { - const theme = createMuiTheme(); + const theme = createTheme(); theme.mixins.gutters(); expect(consoleWarnMock.callCount()).to.equal(1); expect(consoleWarnMock.messages()[0]).to.include('theme.mixins.gutters() is deprecated.'); diff --git a/packages/material-ui/src/styles/createMuiStrictModeTheme.js b/packages/material-ui/src/styles/createMuiStrictModeTheme.js index bfa25964cbd153..84bc31d1e09eed 100644 --- a/packages/material-ui/src/styles/createMuiStrictModeTheme.js +++ b/packages/material-ui/src/styles/createMuiStrictModeTheme.js @@ -1,8 +1,8 @@ import { deepmerge } from '@material-ui/utils'; -import createMuiTheme from './createMuiTheme'; +import createTheme from './createTheme'; export default function createMuiStrictModeTheme(options, ...args) { - return createMuiTheme( + return createTheme( deepmerge( { unstable_strictMode: true, diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 8b56199197ccf5..53ac08237b3380 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -177,10 +177,10 @@ export default function createPalette(palette) { '`color.main` should be a string, but `%s` was provided instead.\n\n' + 'Did you intend to use one of the following approaches?\n\n' + 'import { green } from "@material-ui/core/colors";\n\n' + - 'const theme1 = createMuiTheme({ palette: {\n' + + 'const theme1 = createTheme({ palette: {\n' + ' primary: green,\n' + '} });\n\n' + - 'const theme2 = createMuiTheme({ palette: {\n' + + 'const theme2 = createTheme({ palette: {\n' + ' primary: { main: green[500] },\n' + '} });', JSON.stringify(color.main), diff --git a/packages/material-ui/src/styles/createPalette.spec.ts b/packages/material-ui/src/styles/createPalette.spec.ts index 32d3df80f7ee85..d539b59369b81c 100644 --- a/packages/material-ui/src/styles/createPalette.spec.ts +++ b/packages/material-ui/src/styles/createPalette.spec.ts @@ -1,14 +1,14 @@ import { Color } from '@material-ui/core'; import { blue, common } from '@material-ui/core/colors'; import { - createMuiTheme, + createTheme, PaletteColorOptions, SimplePaletteColorOptions, Theme, } from '@material-ui/core/styles'; { - const palette = createMuiTheme().palette; + const palette = createTheme().palette; const color: Color = blue; const option: SimplePaletteColorOptions = { main: blue[400] }; const colorOrOption: PaletteColorOptions = undefined as any; diff --git a/packages/material-ui/src/styles/createSpacing.spec.ts b/packages/material-ui/src/styles/createSpacing.spec.ts index f9ba632a7f02bb..ff6e2afdcff95f 100644 --- a/packages/material-ui/src/styles/createSpacing.spec.ts +++ b/packages/material-ui/src/styles/createSpacing.spec.ts @@ -1,11 +1,11 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; { let theme; - theme = createMuiTheme({ + theme = createTheme({ spacing: 8, }); - theme = createMuiTheme({ + theme = createTheme({ spacing: (factor: number) => `${0.8 * factor}rem`, }); } diff --git a/packages/material-ui/src/styles/createMuiTheme.d.ts b/packages/material-ui/src/styles/createTheme.d.ts similarity index 84% rename from packages/material-ui/src/styles/createMuiTheme.d.ts rename to packages/material-ui/src/styles/createTheme.d.ts index 27b380c35e0870..d4b80c116e8225 100644 --- a/packages/material-ui/src/styles/createMuiTheme.d.ts +++ b/packages/material-ui/src/styles/createTheme.d.ts @@ -44,4 +44,10 @@ export interface Theme { unstable_strictMode?: boolean; } -export default function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme; +/** + * @deprecated + * Use `import { createTheme } from '@material-ui/core/styles'` instead. + */ +export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme; + +export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme; diff --git a/packages/material-ui/src/styles/createMuiTheme.js b/packages/material-ui/src/styles/createTheme.js similarity index 84% rename from packages/material-ui/src/styles/createMuiTheme.js rename to packages/material-ui/src/styles/createTheme.js index b679500db0bca4..c5d890fd815052 100644 --- a/packages/material-ui/src/styles/createMuiTheme.js +++ b/packages/material-ui/src/styles/createTheme.js @@ -9,7 +9,7 @@ import createSpacing from './createSpacing'; import transitions from './transitions'; import zIndex from './zIndex'; -function createMuiTheme(options = {}, ...args) { +function createTheme(options = {}, ...args) { const { breakpoints: breakpointsInput = {}, mixins: mixinsInput = {}, @@ -100,4 +100,23 @@ function createMuiTheme(options = {}, ...args) { return muiTheme; } -export default createMuiTheme; +let warnedOnce = false; + +export function createMuiTheme(...args) { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnce) { + warnedOnce = true; + console.error( + [ + 'Material-UI: the createMuiTheme function was renamed to createTheme.', + '', + "You should use `import { createTheme } from '@material-ui/core/styles'`", + ].join('\n'), + ); + } + } + + return createTheme(...args); +} + +export default createTheme; diff --git a/packages/material-ui/src/styles/createMuiTheme.test.js b/packages/material-ui/src/styles/createTheme.test.js similarity index 76% rename from packages/material-ui/src/styles/createMuiTheme.test.js rename to packages/material-ui/src/styles/createTheme.test.js index 537ca6c6403c9e..5abb53a337a01b 100644 --- a/packages/material-ui/src/styles/createMuiTheme.test.js +++ b/packages/material-ui/src/styles/createTheme.test.js @@ -1,17 +1,17 @@ import { expect } from 'chai'; -import createMuiTheme from './createMuiTheme'; +import createTheme from './createTheme'; import { deepOrange, green } from '../colors'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -describe('createMuiTheme', () => { +describe('createTheme', () => { it('should have a palette', () => { - const muiTheme = createMuiTheme(); - expect(typeof createMuiTheme).to.equal('function'); + const muiTheme = createTheme(); + expect(typeof createTheme).to.equal('function'); expect(typeof muiTheme.palette).to.equal('object'); }); it('should have the custom palette', () => { - const muiTheme = createMuiTheme({ + const muiTheme = createTheme({ palette: { primary: { main: deepOrange[500] }, secondary: { main: green.A400 } }, }); expect(muiTheme.palette.primary.main).to.equal(deepOrange[500]); @@ -19,13 +19,13 @@ describe('createMuiTheme', () => { }); it('should allow providing a partial structure', () => { - const muiTheme = createMuiTheme({ transitions: { duration: { shortest: 150 } } }); + const muiTheme = createTheme({ transitions: { duration: { shortest: 150 } } }); expect(muiTheme.transitions.duration.shorter).to.not.equal(undefined); }); describe('shadows', () => { it('should provide the default array', () => { - const muiTheme = createMuiTheme(); + const muiTheme = createTheme(); expect(muiTheme.shadows[2]).to.equal( '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', ); @@ -59,7 +59,7 @@ describe('createMuiTheme', () => { 11, 11, ]; - const muiTheme = createMuiTheme({ shadows }); + const muiTheme = createTheme({ shadows }); expect(muiTheme.shadows).to.equal(shadows); }); }); @@ -78,7 +78,7 @@ describe('createMuiTheme', () => { container: document.createElement('div'), }, }; - const muiTheme = createMuiTheme({ props }); + const muiTheme = createTheme({ props }); expect(muiTheme.props).to.deep.equal(props); }); }); @@ -95,12 +95,12 @@ describe('createMuiTheme', () => { it('should warn when trying to override an internal state the wrong way', () => { let theme; - theme = createMuiTheme({ overrides: { Button: { disabled: { color: 'blue' } } } }); + theme = createTheme({ overrides: { Button: { disabled: { color: 'blue' } } } }); expect(Object.keys(theme.overrides.Button.disabled).length).to.equal(1); expect(consoleErrorMock.messages().length).to.equal(0); - theme = createMuiTheme({ overrides: { MuiButton: { root: { color: 'blue' } } } }); + theme = createTheme({ overrides: { MuiButton: { root: { color: 'blue' } } } }); expect(consoleErrorMock.messages().length).to.equal(0); - theme = createMuiTheme({ overrides: { MuiButton: { disabled: { color: 'blue' } } } }); + theme = createTheme({ overrides: { MuiButton: { disabled: { color: 'blue' } } } }); expect(Object.keys(theme.overrides.MuiButton.disabled).length).to.equal(0); expect(consoleErrorMock.messages().length).to.equal(1); expect(consoleErrorMock.messages()[0]).to.match( @@ -110,16 +110,13 @@ describe('createMuiTheme', () => { }); it('shallow merges multiple arguments', () => { - const muiTheme = createMuiTheme({ foo: 'I am foo' }, { bar: 'I am bar' }); + const muiTheme = createTheme({ foo: 'I am foo' }, { bar: 'I am bar' }); expect(muiTheme.foo).to.equal('I am foo'); expect(muiTheme.bar).to.equal('I am bar'); }); it('deep merges multiple arguments', () => { - const muiTheme = createMuiTheme( - { custom: { foo: 'I am foo' } }, - { custom: { bar: 'I am bar' } }, - ); + const muiTheme = createTheme({ custom: { foo: 'I am foo' } }, { custom: { bar: 'I am bar' } }); expect(muiTheme.custom.foo).to.equal('I am foo'); expect(muiTheme.custom.bar).to.equal('I am bar'); }); diff --git a/packages/material-ui/src/styles/createTypography.spec.ts b/packages/material-ui/src/styles/createTypography.spec.ts index 38ffcafd7809db..fbc922f847263b 100644 --- a/packages/material-ui/src/styles/createTypography.spec.ts +++ b/packages/material-ui/src/styles/createTypography.spec.ts @@ -1,9 +1,9 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; import { expectType } from '@material-ui/types'; { // properties of the variants can be "unset" - const theme = createMuiTheme({ + const theme = createTheme({ typography: { allVariants: { fontStyle: undefined, diff --git a/packages/material-ui/src/styles/defaultTheme.js b/packages/material-ui/src/styles/defaultTheme.js index 198dddc1f98a1b..aa830ab16354db 100644 --- a/packages/material-ui/src/styles/defaultTheme.js +++ b/packages/material-ui/src/styles/defaultTheme.js @@ -1,5 +1,5 @@ -import createMuiTheme from './createMuiTheme'; +import createTheme from './createTheme'; -const defaultTheme = createMuiTheme(); +const defaultTheme = createTheme(); export default defaultTheme; diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts index 02913b95e053ec..931cb948ab8d3f 100644 --- a/packages/material-ui/src/styles/index.d.ts +++ b/packages/material-ui/src/styles/index.d.ts @@ -1,11 +1,12 @@ export * from './colorManipulator'; export { - default as createMuiTheme, + default as createTheme, default as unstable_createMuiStrictModeTheme, + createMuiTheme, ThemeOptions, Theme, Direction, -} from './createMuiTheme'; +} from './createTheme'; export { PaletteColorOptions, SimplePaletteColorOptions } from './createPalette'; export { default as createStyles } from './createStyles'; export { TypographyStyle, Variant as TypographyVariant } from './createTypography'; diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js index 4b20b716f13994..cfb0e723d729da 100644 --- a/packages/material-ui/src/styles/index.js +++ b/packages/material-ui/src/styles/index.js @@ -1,5 +1,5 @@ export * from './colorManipulator'; -export { default as createMuiTheme } from './createMuiTheme'; +export { default as createTheme, createMuiTheme } from './createTheme'; // eslint-disable-next-line camelcase export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme'; export { default as createStyles } from './createStyles'; diff --git a/packages/material-ui/src/styles/makeStyles.d.ts b/packages/material-ui/src/styles/makeStyles.d.ts index d99482431fa5de..8aaabdfb64533f 100644 --- a/packages/material-ui/src/styles/makeStyles.d.ts +++ b/packages/material-ui/src/styles/makeStyles.d.ts @@ -1,4 +1,4 @@ -import { Theme as DefaultTheme } from './createMuiTheme'; +import { Theme as DefaultTheme } from './createTheme'; import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles'; import { Omit } from '@material-ui/types'; diff --git a/packages/material-ui/src/styles/responsiveFontSizes.d.ts b/packages/material-ui/src/styles/responsiveFontSizes.d.ts index 309d3382b9313d..2039a0b8a67d37 100644 --- a/packages/material-ui/src/styles/responsiveFontSizes.d.ts +++ b/packages/material-ui/src/styles/responsiveFontSizes.d.ts @@ -1,4 +1,4 @@ -import { Theme } from './createMuiTheme'; +import { Theme } from './createTheme'; import { Breakpoint } from './createBreakpoints'; import { Variant } from './createTypography'; diff --git a/packages/material-ui/src/styles/responsiveFontSizes.test.js b/packages/material-ui/src/styles/responsiveFontSizes.test.js index 2221406cb38fb6..c370813fd13bb5 100644 --- a/packages/material-ui/src/styles/responsiveFontSizes.test.js +++ b/packages/material-ui/src/styles/responsiveFontSizes.test.js @@ -1,6 +1,6 @@ import { expect } from 'chai'; import responsiveFontSizes from './responsiveFontSizes'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; describe('responsiveFontSizes', () => { it('should support unitless line height', () => { @@ -12,7 +12,7 @@ describe('responsiveFontSizes', () => { lineHeight: 1, }; - const theme = createMuiTheme({ + const theme = createTheme({ typography: { h1: defaultVariant, }, @@ -36,7 +36,7 @@ describe('responsiveFontSizes', () => { lineHeight: '6rem', }; - const theme = createMuiTheme({ + const theme = createTheme({ typography: { h1: defaultVariant, }, @@ -56,7 +56,7 @@ describe('responsiveFontSizes', () => { describe('when requesting a responsive typography with non unitless line height and alignment', () => { it('should throw an error, as this is not supported', () => { - const theme = createMuiTheme({ + const theme = createTheme({ typography: { h1: { lineHeight: '6rem', diff --git a/packages/material-ui/src/styles/styled.d.ts b/packages/material-ui/src/styles/styled.d.ts index 0414fde1bfd65c..92d68a5c1b3a32 100644 --- a/packages/material-ui/src/styles/styled.d.ts +++ b/packages/material-ui/src/styles/styled.d.ts @@ -4,7 +4,7 @@ import { StyledComponentProps, WithStylesOptions, } from '@material-ui/styles/withStyles'; -import { Theme as DefaultTheme } from './createMuiTheme'; +import { Theme as DefaultTheme } from './createTheme'; import * as React from 'react'; // These definitions are almost identical to the ones in @material-ui/styles/styled diff --git a/packages/material-ui/src/styles/useTheme.d.ts b/packages/material-ui/src/styles/useTheme.d.ts index 3a6c011857eb5b..7fbc5ac3657c89 100644 --- a/packages/material-ui/src/styles/useTheme.d.ts +++ b/packages/material-ui/src/styles/useTheme.d.ts @@ -1,3 +1,3 @@ -import { Theme } from './createMuiTheme'; +import { Theme } from './createTheme'; export default function useTheme(): T; diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts index 6b0b2ed5879eae..797bcc2810b697 100644 --- a/packages/material-ui/src/styles/withStyles.d.ts +++ b/packages/material-ui/src/styles/withStyles.d.ts @@ -1,5 +1,5 @@ import { PropInjector } from '@material-ui/types'; -import { Theme } from './createMuiTheme'; +import { Theme } from './createTheme'; import { CreateCSSProperties, CSSProperties, diff --git a/packages/material-ui/src/styles/withTheme.d.ts b/packages/material-ui/src/styles/withTheme.d.ts index 70025c9a048c54..b9c305027f9f38 100644 --- a/packages/material-ui/src/styles/withTheme.d.ts +++ b/packages/material-ui/src/styles/withTheme.d.ts @@ -1,4 +1,4 @@ -import { Theme } from './createMuiTheme'; +import { Theme } from './createTheme'; import { PropInjector } from '@material-ui/types'; export interface WithTheme { diff --git a/packages/material-ui/src/withWidth/withWidth.test.js b/packages/material-ui/src/withWidth/withWidth.test.js index 3eb06a7cfdeeab..19881b96b8bb49 100644 --- a/packages/material-ui/src/withWidth/withWidth.test.js +++ b/packages/material-ui/src/withWidth/withWidth.test.js @@ -6,7 +6,7 @@ import { createShallow } from 'test/utils'; import createMount from 'test/utils/createMount'; import mediaQuery from 'css-mediaquery'; import withWidth, { isWidthDown, isWidthUp } from './withWidth'; -import createMuiTheme from '../styles/createMuiTheme'; +import createTheme from '../styles/createTheme'; function createMatchMedia(width, ref) { return (query) => { @@ -154,7 +154,7 @@ describe('withWidth', () => { describe('theme prop: MuiWithWidth.initialWidth', () => { it('should use theme prop', () => { - const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'lg' } } }); + const theme = createTheme({ props: { MuiWithWidth: { initialWidth: 'lg' } } }); const element = ; // First mount on the server const wrapper1 = shallow(element); @@ -175,7 +175,7 @@ describe('withWidth', () => { it('should forward the theme', () => { const EmptyWithWidth2 = withWidth({ withTheme: true })(Empty); - const theme = createMuiTheme(); + const theme = createTheme(); const wrapper = mount(); expect(wrapper.find(Empty).props().theme).to.equal(theme); }); diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx index 6be0f6dd690aa1..cc400dc60f9b59 100644 --- a/packages/material-ui/test/typescript/styles.spec.tsx +++ b/packages/material-ui/test/typescript/styles.spec.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { createStyles, withStyles, - createMuiTheme, + createTheme, Theme, withTheme, StyleRulesCallback, @@ -74,7 +74,7 @@ const AnotherStyledSFC = withStyles({ })(({ classes }: WithStyles<'root'>) =>
Stylish!
); // Overriding styles -const theme = createMuiTheme({ +const theme = createTheme({ palette: { type: 'dark', primary: blue, @@ -132,7 +132,7 @@ const theme = createMuiTheme({ }, }); -const theme2 = createMuiTheme({ +const theme2 = createTheme({ palette: { primary: { main: blue[500], @@ -154,12 +154,12 @@ const theme2 = createMuiTheme({ }, }); -const t1: number = createMuiTheme().spacing(1); -const t2: string = createMuiTheme().spacing(1, 2); -const t3: string = createMuiTheme().spacing(1, 2, 3); -const t4: string = createMuiTheme().spacing(1, 2, 3, 4); +const t1: number = createTheme().spacing(1); +const t2: string = createTheme().spacing(1, 2); +const t3: string = createTheme().spacing(1, 2, 3); +const t4: string = createTheme().spacing(1, 2, 3, 4); // @ts-expect-error -const t5 = createMuiTheme().spacing(1, 2, 3, 4, 5); +const t5 = createTheme().spacing(1, 2, 3, 4, 5); function OverridesTheme() { return ( diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 5e311133754f41..b3351a12902c70 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -62,9 +62,9 @@ async function getSizeLimitBundles() { }, ...coreComponents, { - name: '@material-ui/core/styles/createMuiTheme', + name: '@material-ui/core/styles/createTheme', webpack: true, - path: 'packages/material-ui/build/esm/styles/createMuiTheme.js', + path: 'packages/material-ui/build/esm/styles/createTheme.js', }, { name: 'colorManipulator',