diff --git a/CHANGELOG.md b/CHANGELOG.md index a9a1c057ea8007..2f78d21851b6a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3327,7 +3327,7 @@ Here is an example: https://codesandbox.io/s/vjzn5z4k77. ```jsx import Button from '@material-ui/core/Button'; import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; // Like https://github.com/brunobertolini/styled-by const styledBy = (property, mapping) => props => mapping[props[property]]; diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index de38f6e0bb6fbe..c7c8be53357301 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -242,7 +242,7 @@ An example of the new spacing helper API. ```jsx import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ root: { diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js index 3641c5ba43746b..f99722aaffdb00 100644 --- a/docs/src/modules/components/AppTheme.js +++ b/docs/src/modules/components/AppTheme.js @@ -1,21 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import Head from 'docs/src/modules/components/Head'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; - -const defaultTheme = createMuiTheme(); export default function AppTheme(props) { const { children } = props; return ( - + {children} - + ); } diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 4fa43384872c93..d50533627bb5ed 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -1,8 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { create } from 'jss'; -import { withStyles, useTheme } from '@material-ui/core/styles'; -import { jssPreset, StylesProvider } from '@material-ui/styles'; +import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles'; import NoSsr from '@material-ui/core/NoSsr'; import rtl from 'jss-rtl'; import Frame from 'react-frame-component'; diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index b3573ad79b72ef..383a47d90482db 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -1,7 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles'; -import { createMuiTheme, darken } from '@material-ui/core/styles'; +import { + ThemeProvider as MuiThemeProvider, + createMuiTheme, + darken, +} from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { blue, pink } from '@material-ui/core/colors'; import { getCookie } from 'docs/src/modules/utils/helpers'; diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index a55127caaa7b78..a2f92061ea4bd8 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -7,7 +7,7 @@ title: Box React component

The Box component serves as a wrapper component for most of the CSS utility needs.

The Box component packages [all the style functions](/system/basics/#all-inclusive) that are exposed in `@material-ui/system`. -It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/styles`. +It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. ## Example diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index 7c32fbad7b23f1..15dcf7af45893b 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { green, purple } from '@material-ui/core/colors'; diff --git a/docs/src/pages/components/buttons/CustomizedButtons.tsx b/docs/src/pages/components/buttons/CustomizedButtons.tsx index be9e473333ea12..7a5289b6aed60b 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.tsx +++ b/docs/src/pages/components/buttons/CustomizedButtons.tsx @@ -5,8 +5,8 @@ import { withStyles, makeStyles, Theme, + ThemeProvider, } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import { green, purple } from '@material-ui/core/colors'; diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index a2c2c5d906e1f7..fc02df94c5395c 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/docs/src/pages/components/text-fields/CustomizedInputs.js @@ -1,6 +1,11 @@ import React from 'react'; -import { fade, withStyles, makeStyles, createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { + fade, + ThemeProvider, + withStyles, + makeStyles, + createMuiTheme, +} from '@material-ui/core/styles'; import InputBase from '@material-ui/core/InputBase'; import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.tsx b/docs/src/pages/components/text-fields/CustomizedInputs.tsx index f91b618d10a949..d95f091c0d21ba 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.tsx +++ b/docs/src/pages/components/text-fields/CustomizedInputs.tsx @@ -3,11 +3,11 @@ import { createStyles, fade, Theme, + ThemeProvider, withStyles, makeStyles, createMuiTheme, } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; import InputBase from '@material-ui/core/InputBase'; import InputLabel from '@material-ui/core/InputLabel'; import TextField, { TextFieldProps } from '@material-ui/core/TextField'; diff --git a/docs/src/pages/components/use-media-query/ServerSide.js b/docs/src/pages/components/use-media-query/ServerSide.js index a9dd09110b744b..a618604e769102 100644 --- a/docs/src/pages/components/use-media-query/ServerSide.js +++ b/docs/src/pages/components/use-media-query/ServerSide.js @@ -1,6 +1,6 @@ import React from 'react'; import mediaQuery from 'css-mediaquery'; -import { ThemeProvider } from '@material-ui/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js index a877921af6ac84..2c538a9005be3c 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.js +++ b/docs/src/pages/components/use-media-query/ThemeHelper.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, useTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.tsx b/docs/src/pages/components/use-media-query/ThemeHelper.tsx index a877921af6ac84..2c538a9005be3c 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.tsx +++ b/docs/src/pages/components/use-media-query/ThemeHelper.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, useTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index 4de165a4085e20..ce42a8c65cd478 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -1,7 +1,6 @@ import React from 'react'; -import { ThemeProvider, useTheme } from '@material-ui/styles'; +import { ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { createMuiTheme } from '@material-ui/core/styles'; /** * Be careful using this hook. It only works because the number of diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md index 2d9554af9726ad..3fedc407946241 100644 --- a/docs/src/pages/components/use-media-query/use-media-query.md +++ b/docs/src/pages/components/use-media-query/use-media-query.md @@ -114,7 +114,7 @@ For instance: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; -import { ThemeProvider } from '@material-ui/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user-agent']).device.type || 'desktop'; diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.js b/docs/src/pages/css-in-js/basics/AdaptingHook.js index df9a59b590a7a7..f79872145bf7ad 100644 --- a/docs/src/pages/css-in-js/basics/AdaptingHook.js +++ b/docs/src/pages/css-in-js/basics/AdaptingHook.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx index a74ef74fc57f24..94a5dc781f582f 100644 --- a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx +++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button'; import { Omit } from '@material-ui/types'; diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js index caa43738563562..dba62e99eea47b 100644 --- a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js +++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js @@ -1,5 +1,5 @@ import React from 'react'; -import { styled } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const MyButton = styled(({ color, ...other }) => - + ); } diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.tsx b/docs/src/pages/customization/components/GlobalThemeOverride.tsx index 7390a8a86a5077..b2278f7e14322d 100644 --- a/docs/src/pages/customization/components/GlobalThemeOverride.tsx +++ b/docs/src/pages/customization/components/GlobalThemeOverride.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ @@ -14,8 +14,8 @@ const theme = createMuiTheme({ export default function GlobalThemeOverride() { return ( - + - + ); } diff --git a/docs/src/pages/customization/components/ThemeVariables.js b/docs/src/pages/customization/components/ThemeVariables.js index c1e2750b03dca7..1f77cd2ae705fc 100644 --- a/docs/src/pages/customization/components/ThemeVariables.js +++ b/docs/src/pages/customization/components/ThemeVariables.js @@ -1,5 +1,5 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ @@ -12,8 +12,8 @@ const theme = createMuiTheme({ export default function ThemeVariables() { return ( - + - + ); } diff --git a/docs/src/pages/customization/components/ThemeVariables.tsx b/docs/src/pages/customization/components/ThemeVariables.tsx index c1e2750b03dca7..1f77cd2ae705fc 100644 --- a/docs/src/pages/customization/components/ThemeVariables.tsx +++ b/docs/src/pages/customization/components/ThemeVariables.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ @@ -12,8 +12,8 @@ const theme = createMuiTheme({ export default function ThemeVariables() { return ( - + - + ); } diff --git a/docs/src/pages/customization/globals/DefaultProps.js b/docs/src/pages/customization/globals/DefaultProps.js index 40498cc8083102..eef23c5cb2d498 100644 --- a/docs/src/pages/customization/globals/DefaultProps.js +++ b/docs/src/pages/customization/globals/DefaultProps.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ diff --git a/docs/src/pages/customization/globals/GlobalCss.js b/docs/src/pages/customization/globals/GlobalCss.js index 3fc330d97b4fff..68ecc0ba197fb7 100644 --- a/docs/src/pages/customization/globals/GlobalCss.js +++ b/docs/src/pages/customization/globals/GlobalCss.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 1a4bd623a5b35b..474d186af4cf1b 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -1,7 +1,6 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { useTheme, createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; function WithTheme() { const theme = useTheme(); diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx index 1a4bd623a5b35b..474d186af4cf1b 100644 --- a/docs/src/pages/customization/palette/DarkTheme.tsx +++ b/docs/src/pages/customization/palette/DarkTheme.tsx @@ -1,7 +1,6 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { useTheme, createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; function WithTheme() { const theme = useTheme(); diff --git a/docs/src/pages/customization/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js index 4e2aedd2f4c85e..e46e6287a4b477 100644 --- a/docs/src/pages/customization/theming/CustomStyles.js +++ b/docs/src/pages/customization/theming/CustomStyles.js @@ -1,7 +1,6 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; const useStyles = makeStyles(theme => ({ diff --git a/docs/src/pages/customization/theming/CustomStyles.tsx b/docs/src/pages/customization/theming/CustomStyles.tsx index be3ca41baf3afb..26f65e361fc0c8 100644 --- a/docs/src/pages/customization/theming/CustomStyles.tsx +++ b/docs/src/pages/customization/theming/CustomStyles.tsx @@ -5,8 +5,8 @@ import { makeStyles, createStyles, Theme as AugmentedTheme, + ThemeProvider, } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; import { orange } from '@material-ui/core/colors'; declare module '@material-ui/core/styles/createMuiTheme' { diff --git a/docs/src/pages/customization/theming/ThemeNesting.js b/docs/src/pages/customization/theming/ThemeNesting.js index 406862496f70bd..a9935ab2471d48 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.js +++ b/docs/src/pages/customization/theming/ThemeNesting.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; diff --git a/docs/src/pages/customization/theming/ThemeNesting.tsx b/docs/src/pages/customization/theming/ThemeNesting.tsx index 406862496f70bd..a9935ab2471d48 100644 --- a/docs/src/pages/customization/theming/ThemeNesting.tsx +++ b/docs/src/pages/customization/theming/ThemeNesting.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.js b/docs/src/pages/customization/theming/ThemeNestingExtend.js index 0ba84915752f24..5c21a916083108 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.js +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx index bbc65fb8eabb84..013944efb4fe4e 100644 --- a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx +++ b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, Theme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, Theme, ThemeProvider } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import { green, orange } from '@material-ui/core/colors'; diff --git a/docs/src/pages/customization/typography/FontSizeTheme.js b/docs/src/pages/customization/typography/FontSizeTheme.js index 1c5418307ff769..2ef9540b5e940c 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.js +++ b/docs/src/pages/customization/typography/FontSizeTheme.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; const theme = createMuiTheme({ diff --git a/docs/src/pages/customization/typography/FontSizeTheme.tsx b/docs/src/pages/customization/typography/FontSizeTheme.tsx index 1c5418307ff769..2ef9540b5e940c 100644 --- a/docs/src/pages/customization/typography/FontSizeTheme.tsx +++ b/docs/src/pages/customization/typography/FontSizeTheme.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; const theme = createMuiTheme({ diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.js b/docs/src/pages/customization/typography/ResponsiveFontSizes.js index 4eec9292a68172..23d8338fbfae3e 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; let theme = createMuiTheme(); diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx index 4eec9292a68172..23d8338fbfae3e 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; let theme = createMuiTheme(); diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js index dddff665fa6a1b..af5ab349fa90fe 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.js +++ b/docs/src/pages/customization/typography/TypographyVariants.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx index dddff665fa6a1b..af5ab349fa90fe 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.tsx +++ b/docs/src/pages/customization/typography/TypographyVariants.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index bd6a22344f8836..25368a31889b22 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -128,7 +128,7 @@ export default function StyledComponents() { The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: ```jsx -import { StylesProvider } from '@material-ui/styles'; +import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. diff --git a/docs/src/pages/guides/right-to-left/Direction.js b/docs/src/pages/guides/right-to-left/Direction.js index 758b136c29e3a0..484386e1cc612a 100644 --- a/docs/src/pages/guides/right-to-left/Direction.js +++ b/docs/src/pages/guides/right-to-left/Direction.js @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; const theme = createMuiTheme({ diff --git a/docs/src/pages/guides/right-to-left/Direction.tsx b/docs/src/pages/guides/right-to-left/Direction.tsx index 758b136c29e3a0..484386e1cc612a 100644 --- a/docs/src/pages/guides/right-to-left/Direction.tsx +++ b/docs/src/pages/guides/right-to-left/Direction.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { createMuiTheme } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; const theme = createMuiTheme({ 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 ba560c9c92674e..ff2641b5f956bf 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 @@ -37,7 +37,7 @@ The [`StylesProvider`](/styles/api/#stylesprovider) component enables this: ```jsx import { create } from 'jss'; import rtl from 'jss-rtl'; -import { StylesProvider, jssPreset } from '@material-ui/styles'; +import { StylesProvider, jssPreset } from '@material-ui/core/styles'; // Configure JSS const jss = create({ plugins: [...jssPreset().plugins, rtl()] }); diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index 4c12498126e70d..839abf5376b9bb 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -98,7 +98,7 @@ We will see how this is passed along in the `renderFullPage` function. import express from 'express'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; -import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles'; +import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles'; import App from './App'; import theme from './theme'; @@ -163,7 +163,7 @@ Let's take a look at the client file: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; -import { ThemeProvider } from '@material-ui/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; import App from './App'; import theme from './theme'; diff --git a/docs/src/pages/guides/testing/testing.md b/docs/src/pages/guides/testing/testing.md index ffa30461b6a85e..686383c888742d 100644 --- a/docs/src/pages/guides/testing/testing.md +++ b/docs/src/pages/guides/testing/testing.md @@ -59,16 +59,16 @@ Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api ```jsx import { createMount } from '@material-ui/core/test-utils'; -import { MuiThemeProvider } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; describe('', () => { let mount; function MySuccessButton({ children }) { return ( - + {children} - + ); } diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js index 73a4bf0b3207e2..314f4d2c3b6ca1 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js +++ b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider } from '@material-ui/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from './theme'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 46426754f6ef80..d70b8a4163f049 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createMuiTheme, withStyles } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { createMuiTheme, 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'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index 01b999921e5aac..e165251f021189 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx @@ -1,6 +1,11 @@ import React from 'react'; -import { createMuiTheme, createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; -import { ThemeProvider } from '@material-ui/styles'; +import { + createMuiTheme, + createStyles, + ThemeProvider, + withStyles, + 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'; diff --git a/docs/src/pages/styles/advanced/GlobalCss.js b/docs/src/pages/styles/advanced/GlobalCss.js index 23595e4dfb3c80..41997ffa3ed976 100644 --- a/docs/src/pages/styles/advanced/GlobalCss.js +++ b/docs/src/pages/styles/advanced/GlobalCss.js @@ -1,5 +1,5 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ '@global': { diff --git a/docs/src/pages/styles/advanced/GlobalCss.tsx b/docs/src/pages/styles/advanced/GlobalCss.tsx index 23595e4dfb3c80..41997ffa3ed976 100644 --- a/docs/src/pages/styles/advanced/GlobalCss.tsx +++ b/docs/src/pages/styles/advanced/GlobalCss.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ '@global': { diff --git a/docs/src/pages/styles/advanced/HybridGlobalCss.js b/docs/src/pages/styles/advanced/HybridGlobalCss.js index 6437cab7af059c..e633a7916daab2 100644 --- a/docs/src/pages/styles/advanced/HybridGlobalCss.js +++ b/docs/src/pages/styles/advanced/HybridGlobalCss.js @@ -1,6 +1,6 @@ import React from 'react'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ root: { diff --git a/docs/src/pages/styles/advanced/HybridGlobalCss.tsx b/docs/src/pages/styles/advanced/HybridGlobalCss.tsx index 6437cab7af059c..e633a7916daab2 100644 --- a/docs/src/pages/styles/advanced/HybridGlobalCss.tsx +++ b/docs/src/pages/styles/advanced/HybridGlobalCss.tsx @@ -1,6 +1,6 @@ import React from 'react'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ root: { diff --git a/docs/src/pages/styles/advanced/StringTemplates.js b/docs/src/pages/styles/advanced/StringTemplates.js index fbc3d00f26089e..e3fdaac6fa586d 100644 --- a/docs/src/pages/styles/advanced/StringTemplates.js +++ b/docs/src/pages/styles/advanced/StringTemplates.js @@ -1,5 +1,5 @@ import React from 'react'; -import { jssPreset, StylesProvider, makeStyles } from '@material-ui/styles'; +import { jssPreset, StylesProvider, makeStyles } from '@material-ui/core/styles'; import { create } from 'jss'; import jssTemplate from 'jss-plugin-template'; diff --git a/docs/src/pages/styles/advanced/ThemeNesting.js b/docs/src/pages/styles/advanced/ThemeNesting.js index 73c152b650f248..3052eb8f3a7ad1 100644 --- a/docs/src/pages/styles/advanced/ThemeNesting.js +++ b/docs/src/pages/styles/advanced/ThemeNesting.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, makeStyles } from '@material-ui/styles'; +import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/styles/advanced/ThemeNesting.tsx b/docs/src/pages/styles/advanced/ThemeNesting.tsx index 829449e620f860..84d8252995ed0c 100644 --- a/docs/src/pages/styles/advanced/ThemeNesting.tsx +++ b/docs/src/pages/styles/advanced/ThemeNesting.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, makeStyles, createStyles } from '@material-ui/styles'; +import { ThemeProvider, makeStyles, createStyles } from '@material-ui/core/styles'; interface MyTheme { background: string; diff --git a/docs/src/pages/styles/advanced/Theming.js b/docs/src/pages/styles/advanced/Theming.js index 454d41473b9821..72eac10f5b7466 100644 --- a/docs/src/pages/styles/advanced/Theming.js +++ b/docs/src/pages/styles/advanced/Theming.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, makeStyles } from '@material-ui/styles'; +import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/styles/advanced/Theming.tsx b/docs/src/pages/styles/advanced/Theming.tsx index 5dc56b7e432ead..bc5e7ab1e604a0 100644 --- a/docs/src/pages/styles/advanced/Theming.tsx +++ b/docs/src/pages/styles/advanced/Theming.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, makeStyles } from '@material-ui/styles'; +import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles((theme: typeof themeInstance) => ({ root: { diff --git a/docs/src/pages/styles/advanced/UseTheme.js b/docs/src/pages/styles/advanced/UseTheme.js index eb15a4ec63e231..c939b60caaba7c 100644 --- a/docs/src/pages/styles/advanced/UseTheme.js +++ b/docs/src/pages/styles/advanced/UseTheme.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, useTheme } from '@material-ui/styles'; +import { ThemeProvider, useTheme } from '@material-ui/core/styles'; function DeepChild() { const theme = useTheme(); diff --git a/docs/src/pages/styles/advanced/UseTheme.tsx b/docs/src/pages/styles/advanced/UseTheme.tsx index 6637bf462c0be2..e05bcafbff0562 100644 --- a/docs/src/pages/styles/advanced/UseTheme.tsx +++ b/docs/src/pages/styles/advanced/UseTheme.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider, useTheme } from '@material-ui/styles'; +import { ThemeProvider, useTheme } from '@material-ui/core/styles'; interface MyTheme { spacing: string; diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md index d79bdbef6e8584..a37fca73d401cd 100644 --- a/docs/src/pages/styles/advanced/advanced.md +++ b/docs/src/pages/styles/advanced/advanced.md @@ -1,13 +1,16 @@ # Advanced -

This section covers more advanced usage of @material-ui/styles.

+

This section covers more advanced usage of @material-ui/core/styles.

## Theming -Add a `ThemeProvider` to the top level of your app to pass the theme down the React component tree. Then, you can access the theme object in style functions. +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 new theme. See the [theming section](/customization/theming) for how to customize the default Material-UI theme. ```jsx -import { ThemeProvider } from '@material-ui/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; +import DeepChild from './my_components/DeepChild'; const theme = { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', @@ -30,8 +33,10 @@ You might need to access the theme variables inside your React components. #### `useTheme` hook +For use in function components: + ```jsx -import { useTheme } from '@material-ui/styles'; +import { useTheme } from '@material-ui/core/styles'; function DeepChild() { const theme = useTheme(); @@ -43,8 +48,10 @@ function DeepChild() { #### `withTheme` HOC +For use in class or function components: + ```jsx -import { withTheme } from '@material-ui/styles'; +import { withTheme } from '@material-ui/core/styles'; function DeepChildRaw(props) { return {`spacing ${props.theme.spacing}`}; @@ -114,7 +121,7 @@ function Parent() { However, the class names are often non-deterministic. How can a parent component override the style of a nested element? -### withStyles +### `withStyles` This is the simplest case. the wrapped component accepts a `classes` prop, it simply merges the class names provided with the style sheet. @@ -136,7 +143,7 @@ function Parent() { } ``` -### makeStyles +### `makeStyles` The hook API requires a bit more work. You have to forward the parent props to the hook as a first argument. @@ -182,7 +189,7 @@ Of course, you are free to use additional plugins. Here is an example with the [ ```jsx import { create } from 'jss'; -import { StylesProvider, jssPreset } from '@material-ui/styles'; +import { StylesProvider, jssPreset } from '@material-ui/core/styles'; import rtl from 'jss-rtl' const jss = create({ @@ -237,7 +244,7 @@ They gain more specificity than any other style tags on your page e.g. CSS modul The `StylesProvider` component has an `injectFirst` prop to inject the style tags **first** in the head (less priority): ```jsx -import { StylesProvider } from '@material-ui/styles'; +import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. @@ -251,7 +258,7 @@ The injection of style tags happens in the **same order** as the `makeStyles` / ```jsx import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStylesBase = makeStyles({ root: { @@ -298,7 +305,7 @@ The simplest approach is to add an HTML comment to the `` that determines ```jsx import { create } from 'jss'; -import { StylesProvider, jssPreset } from '@material-ui/styles'; +import { StylesProvider, jssPreset } from '@material-ui/core/styles'; const jss = create({ ...jssPreset(), @@ -313,7 +320,7 @@ function App() { export default App; ``` -#### Other HTML element +#### Other HTML elements [Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around this issue, you can provide a DOM element (other than a comment) as the JSS insertion point, for example, a `