diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 77e5f9e1505f0f..4ee0d92b6083cd 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -50,33 +50,33 @@ Here are the most significant improvements since December 2020. The migration to the new style engine allows us to fully rely on dynamic styles. Developers can now do the following: - ```jsx - import { createMuiTheme, Button } from '@material-ui/core'; - - // 1. Extend the theme. - const theme = createMuiTheme({ - palette: { - neutral: { - main: '#5c6ac4', - }, +```jsx +import { createMuiTheme, Button } from '@material-ui/core'; + +// 1. Extend the theme. +const theme = createMuiTheme({ + palette: { + neutral: { + main: '#5c6ac4', }, - }); - - // 2. Notify TypeScript about the new color in the palette - declare module '@material-ui/core/styles' { - interface Palette { - neutral: Palette['primary']; - } - interface PaletteOptions { - neutral: PaletteOptions['primary']; - } + }, +}); + +// 2. Notify TypeScript about the new color in the palette +declare module '@material-ui/core/styles' { + interface Palette { + neutral: Palette['primary']; + } + interface PaletteOptions { + neutral: PaletteOptions['primary']; } +} - // 3. Profit - - - - - - - + + + + - - + + {/* End hero unit */} {cards.map((card) => ( - + - + Heading @@ -136,7 +113,7 @@ export default function Album() { {/* Footer */} - + {/* End footer */} ); diff --git a/docs/src/pages/getting-started/templates/album/Album.tsx b/docs/src/pages/getting-started/templates/album/Album.tsx index 6d24f062aa412a..987f5b1dec5696 100644 --- a/docs/src/pages/getting-started/templates/album/Album.tsx +++ b/docs/src/pages/getting-started/templates/album/Album.tsx @@ -8,9 +8,10 @@ import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import CssBaseline from '@material-ui/core/CssBaseline'; import Grid from '@material-ui/core/Grid'; +import Stack from '@material-ui/core/Stack'; +import Box from '@material-ui/core/Box'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; import Link from '@material-ui/core/Link'; @@ -27,49 +28,15 @@ function Copyright() { ); } -const useStyles = makeStyles((theme) => ({ - icon: { - marginRight: theme.spacing(2), - }, - heroContent: { - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(8, 0, 6), - }, - heroButtons: { - marginTop: theme.spacing(4), - }, - cardGrid: { - paddingTop: theme.spacing(8), - paddingBottom: theme.spacing(8), - }, - card: { - height: '100%', - display: 'flex', - flexDirection: 'column', - }, - cardMedia: { - paddingTop: '56.25%', // 16:9 - }, - cardContent: { - flexGrow: 1, - }, - footer: { - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(6), - }, -})); - const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9]; export default function Album() { - const classes = useStyles(); - return ( - + Album layout @@ -77,7 +44,13 @@ export default function Album() {
{/* Hero unit */} -
+ -
- - - - - - - - -
+ + + + -
- + + {/* End hero unit */} {cards.map((card) => ( - + - + Heading @@ -136,7 +113,7 @@ export default function Album() {
{/* Footer */} -
+ Footer @@ -149,7 +126,7 @@ export default function Album() { Something here to give the footer a purpose! -
+ {/* End footer */} ); diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js index 5e92b03897395b..412a9681906df5 100644 --- a/docs/src/pages/getting-started/templates/blog/Blog.js +++ b/docs/src/pages/getting-started/templates/blog/Blog.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Grid from '@material-ui/core/Grid'; import Container from '@material-ui/core/Container'; @@ -16,12 +15,6 @@ import post1 from './blog-post.1.md'; import post2 from './blog-post.2.md'; import post3 from './blog-post.3.md'; -const useStyles = makeStyles((theme) => ({ - mainGrid: { - marginTop: theme.spacing(3), - }, -})); - const sections = [ { title: 'Technology', url: '#' }, { title: 'Design', url: '#' }, @@ -90,8 +83,6 @@ const sidebar = { }; export default function Blog() { - const classes = useStyles(); - return ( @@ -104,7 +95,7 @@ export default function Blog() { ))} - +
({ - mainGrid: { - marginTop: theme.spacing(3), - }, -})); - const sections = [ { title: 'Technology', url: '#' }, { title: 'Design', url: '#' }, @@ -90,8 +83,6 @@ const sidebar = { }; export default function Blog() { - const classes = useStyles(); - return ( @@ -104,7 +95,7 @@ export default function Blog() { ))} - +
({ - footer: { - backgroundColor: theme.palette.background.paper, - // marginTop: theme.spacing(8), - padding: theme.spacing(6, 0), - }, -})); - function Footer(props) { - const classes = useStyles(); const { description, title } = props; return ( -
+ {title} @@ -46,7 +37,7 @@ function Footer(props) { -
+ ); } diff --git a/docs/src/pages/getting-started/templates/blog/Footer.tsx b/docs/src/pages/getting-started/templates/blog/Footer.tsx index 8740dcec32227a..a25083f1510ffb 100644 --- a/docs/src/pages/getting-started/templates/blog/Footer.tsx +++ b/docs/src/pages/getting-started/templates/blog/Footer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; @@ -17,25 +17,16 @@ function Copyright() { ); } -const useStyles = makeStyles((theme) => ({ - footer: { - backgroundColor: theme.palette.background.paper, - // marginTop: theme.spacing(8), - padding: theme.spacing(6, 0), - }, -})); - interface FooterProps { description: string; title: string; } export default function Footer(props: FooterProps) { - const classes = useStyles(); const { description, title } = props; return ( -
+ {title} @@ -50,6 +41,6 @@ export default function Footer(props: FooterProps) { -
+ ); } diff --git a/docs/src/pages/getting-started/templates/blog/Header.js b/docs/src/pages/getting-started/templates/blog/Header.js index 1effde1c20233f..e10c570a5e5b84 100644 --- a/docs/src/pages/getting-started/templates/blog/Header.js +++ b/docs/src/pages/getting-started/templates/blog/Header.js @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; import Toolbar from '@material-ui/core/Toolbar'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; @@ -8,30 +7,12 @@ import SearchIcon from '@material-ui/icons/Search'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme) => ({ - toolbar: { - borderBottom: `1px solid ${theme.palette.divider}`, - }, - toolbarTitle: { - flex: 1, - }, - toolbarSecondary: { - justifyContent: 'space-between', - overflowX: 'auto', - }, - toolbarLink: { - padding: theme.spacing(1), - flexShrink: 0, - }, -})); - function Header(props) { - const classes = useStyles(); const { sections, title } = props; return ( - + {title} @@ -50,7 +31,11 @@ function Header(props) { Sign up - + {sections.map((section) => ( {section.title} diff --git a/docs/src/pages/getting-started/templates/blog/Header.tsx b/docs/src/pages/getting-started/templates/blog/Header.tsx index 05bf6f737b3309..8f3333dd56de83 100644 --- a/docs/src/pages/getting-started/templates/blog/Header.tsx +++ b/docs/src/pages/getting-started/templates/blog/Header.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import Toolbar from '@material-ui/core/Toolbar'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; @@ -7,23 +6,6 @@ import SearchIcon from '@material-ui/icons/Search'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme) => ({ - toolbar: { - borderBottom: `1px solid ${theme.palette.divider}`, - }, - toolbarTitle: { - flex: 1, - }, - toolbarSecondary: { - justifyContent: 'space-between', - overflowX: 'auto', - }, - toolbarLink: { - padding: theme.spacing(1), - flexShrink: 0, - }, -})); - interface HeaderProps { sections: ReadonlyArray<{ title: string; @@ -33,12 +15,11 @@ interface HeaderProps { } export default function Header(props: HeaderProps) { - const classes = useStyles(); const { sections, title } = props; return ( - + {title} @@ -57,7 +38,11 @@ export default function Header(props: HeaderProps) { Sign up - + {sections.map((section) => ( {section.title} diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js index 77e08e02c8bd86..42dececcb24c95 100644 --- a/docs/src/pages/getting-started/templates/blog/Sidebar.js +++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js @@ -1,34 +1,23 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; +import Stack from '@material-ui/core/Stack'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme) => ({ - sidebarAboutBox: { - padding: theme.spacing(2), - backgroundColor: theme.palette.grey[200], - }, - sidebarSection: { - marginTop: theme.spacing(3), - }, -})); - function Sidebar(props) { - const classes = useStyles(); const { archives, description, social, title } = props; return ( - + {title} {description} - + Archives {archives.map((archive) => ( @@ -37,17 +26,21 @@ function Sidebar(props) { ))} - + Social {social.map((network) => ( - - - - - - {network.name} - + + + + {network.name} + ))} diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.tsx b/docs/src/pages/getting-started/templates/blog/Sidebar.tsx index 38a4d2581578af..732390f14e739b 100644 --- a/docs/src/pages/getting-started/templates/blog/Sidebar.tsx +++ b/docs/src/pages/getting-started/templates/blog/Sidebar.tsx @@ -1,20 +1,10 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; +import Stack from '@material-ui/core/Stack'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme) => ({ - sidebarAboutBox: { - padding: theme.spacing(2), - backgroundColor: theme.palette.grey[200], - }, - sidebarSection: { - marginTop: theme.spacing(3), - }, -})); - interface SidebarProps { archives: ReadonlyArray<{ url: string; @@ -29,18 +19,17 @@ interface SidebarProps { } export default function Sidebar(props: SidebarProps) { - const classes = useStyles(); const { archives, description, social, title } = props; return ( - + {title} {description} - + Archives {archives.map((archive) => ( @@ -48,17 +37,21 @@ export default function Sidebar(props: SidebarProps) { {archive.title} ))} - + Social {social.map((network) => ( - - - - - - {network.name} - + + + + {network.name} + ))} diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index feb10ca53c2025..e007adbd959cf9 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -27,9 +27,6 @@ function Copyright(props) { } const useStyles = makeStyles((theme) => ({ - root: { - height: '100vh', - }, image: { backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', @@ -46,7 +43,7 @@ export default function SignInSide() { const classes = useStyles(); return ( - + diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx index 8d5ad2781e33fb..745f249328404b 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx @@ -27,9 +27,6 @@ function Copyright(props: any) { } const useStyles = makeStyles((theme) => ({ - root: { - height: '100vh', - }, image: { backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', @@ -46,7 +43,7 @@ export default function SignInSide() { const classes = useStyles(); return ( - + diff --git a/packages/material-ui-lab/src/YearPicker/PickersYear.tsx b/packages/material-ui-lab/src/YearPicker/PickersYear.tsx index 2a0e21542e7018..b7f2812dc7fc7c 100644 --- a/packages/material-ui-lab/src/YearPicker/PickersYear.tsx +++ b/packages/material-ui-lab/src/YearPicker/PickersYear.tsx @@ -30,7 +30,7 @@ export const styles: MuiStyles = (theme): StyleRules { @@ -27,7 +27,7 @@ const useUtilityClasses = (styleProps) => { icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'], }; - return composeClasses(slots, getNativeSelectUtilitiyClasses, classes); + return composeClasses(slots, getNativeSelectUtilityClasses, classes); }; export const nativeSelectRootStyles = ({ styleProps, theme }) => ({ diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js index 70cfb0a4434ee9..8180c426b370ef 100644 --- a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js +++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js @@ -1,6 +1,6 @@ import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; -export function getNativeSelectUtilitiyClasses(slot) { +export function getNativeSelectUtilityClasses(slot) { return generateUtilityClass('MuiNativeSelect', slot); } diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index 15dd6a211365ef..08cf8890a3c421 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/packages/material-ui/src/Select/SelectInput.js @@ -13,7 +13,7 @@ import { isFilled } from '../InputBase/utils'; import experimentalStyled from '../styles/experimentalStyled'; import useForkRef from '../utils/useForkRef'; import useControlled from '../utils/useControlled'; -import selectClasses, { getSelectUtilitiyClasses } from './selectClasses'; +import selectClasses, { getSelectUtilityClasses } from './selectClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; @@ -96,7 +96,7 @@ const useUtilityClasses = (styleProps) => { nativeInput: ['nativeInput'], }; - return composeClasses(slots, getSelectUtilitiyClasses, classes); + return composeClasses(slots, getSelectUtilityClasses, classes); }; /** diff --git a/packages/material-ui/src/Select/selectClasses.js b/packages/material-ui/src/Select/selectClasses.js index 5a18444f3bda7b..dd658f56647f9d 100644 --- a/packages/material-ui/src/Select/selectClasses.js +++ b/packages/material-ui/src/Select/selectClasses.js @@ -1,6 +1,6 @@ import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; -export function getSelectUtilitiyClasses(slot) { +export function getSelectUtilityClasses(slot) { return generateUtilityClass('MuiSelect', slot); }