Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Change imports from @material-ui/styles to @material-ui/core/styles #17447

Merged
merged 12 commits into from
Oct 4, 2019
Merged

[docs] Change imports from @material-ui/styles to @material-ui/core/styles #17447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3614f6f
Documentation adjustment of refs #17387
Sep 16, 2019
4bc4561
"Adjustment the documentation of the makeStyles method refs #17387"
Sep 16, 2019
2fa642f
Adjust doc
Sep 16, 2019
e00aed1
Don't update translations
mbrookes Sep 27, 2019
fbf0207
Revise basics.md for core/styles
mbrookes Sep 28, 2019
ca88fc9
Update exports, advanced and API docs
mbrookes Sep 28, 2019
eabaab9
Fix misc imports
mbrookes Sep 28, 2019
346f2fc
Roll out the barrel
mbrookes Sep 28, 2019
29549ed
Rebase
oliviertassinari Sep 28, 2019
3b111c9
double down on ThemeProvider
oliviertassinari Oct 1, 2019
a847c2c
basics - improve the core/styles vs styles wording
mbrookes Oct 1, 2019
0f05e13
Review
mbrookes Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]];
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/blog/material-ui-v4-is-out.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
8 changes: 2 additions & 6 deletions docs/src/modules/components/AppTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<ThemeProvider theme={defaultTheme}>
<React.Fragment>
<Head>
<meta name="robots" content="noindex,nofollow" />
</Head>
{children}
</ThemeProvider>
</React.Fragment>
);
}

Expand Down
3 changes: 1 addition & 2 deletions docs/src/modules/components/DemoSandboxed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
7 changes: 5 additions & 2 deletions docs/src/modules/components/ThemeContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/box/box.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ title: Box React component
<p class="description">The Box component serves as a wrapper component for most of the CSS utility needs.</p>

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

Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/buttons/CustomizedButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/buttons/CustomizedButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 7 additions & 2 deletions docs/src/pages/components/text-fields/CustomizedInputs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/CustomizedInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/use-media-query/ServerSide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/use-media-query/ThemeHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/use-media-query/ThemeHelper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/use-media-query/UseWidth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/use-media-query/use-media-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/css-in-js/basics/AdaptingHook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/css-in-js/basics/AdaptingHook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => <Button {...other} />)({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { styled } from '@material-ui/styles';
import { styled } from '@material-ui/core/styles';
import Button, { ButtonProps } from '@material-ui/core/Button';
import { Omit } from '@material-ui/types';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/color/color.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Alternatively, you can enter hex values in the Primary and Secondary text fields

{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": 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 [`MuiThemeProvider`](/customization/theming/#theme-provider)):
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)):

```jsx
import { createMuiTheme } from '@material-ui/core/styles';
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/components/DynamicThemeNesting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme, 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';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/customization/components/GlobalThemeOverride.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -14,8 +14,8 @@ const theme = createMuiTheme({

export default function GlobalThemeOverride() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}
6 changes: 3 additions & 3 deletions docs/src/pages/customization/components/GlobalThemeOverride.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -14,8 +14,8 @@ const theme = createMuiTheme({

export default function GlobalThemeOverride() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}
6 changes: 3 additions & 3 deletions docs/src/pages/customization/components/ThemeVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -12,8 +12,8 @@ const theme = createMuiTheme({

export default function ThemeVariables() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}
6 changes: 3 additions & 3 deletions docs/src/pages/customization/components/ThemeVariables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -12,8 +12,8 @@ const theme = createMuiTheme({

export default function ThemeVariables() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}
3 changes: 1 addition & 2 deletions docs/src/pages/customization/globals/DefaultProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/globals/GlobalCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/palette/DarkTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/palette/DarkTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/theming/CustomStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => ({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/theming/CustomStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' {
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/theming/ThemeNesting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/theming/ThemeNesting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/theming/ThemeNestingExtend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/theming/ThemeNestingExtend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/typography/FontSizeTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/typography/FontSizeTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/typography/ResponsiveFontSizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/customization/typography/ResponsiveFontSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
Loading