diff --git a/docs/src/modules/XWrapper.js b/docs/src/modules/XWrapper.js index 63674d1e87eda..376d9f694fd06 100644 --- a/docs/src/modules/XWrapper.js +++ b/docs/src/modules/XWrapper.js @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ '@global': { diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js index 59c72cc96865f..ad6a874fba60b 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid } from '@material-ui/data-grid'; import { randomStatusOptions, diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx index 5699a57c7ecce..752279dad92d9 100644 --- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, GridColTypeDef } from '@material-ui/data-grid'; import { randomStatusOptions, diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js index 427ebeb62fb5b..54a4a43fd2648 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, isOverflown } from '@material-ui/data-grid'; const useStyles = makeStyles(() => ({ diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx index f57f9e53d46d1..4b7da4ddb7ae7 100644 --- a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx +++ b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; -import { createStyles, makeStyles } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { DataGrid, GridColDef, diff --git a/docs/src/pages/components/data-grid/components/CustomColumnMenu.js b/docs/src/pages/components/data-grid/components/CustomColumnMenu.js index 424dd2e2f4aa7..caccad30bce16 100644 --- a/docs/src/pages/components/data-grid/components/CustomColumnMenu.js +++ b/docs/src/pages/components/data-grid/components/CustomColumnMenu.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { GridColumnMenu, @@ -12,16 +13,20 @@ import { } from '@material-ui/x-grid'; import StarOutlineIcon from '@material-ui/icons/StarOutline'; -const useStyles = makeStyles((theme) => ({ - primary: { - background: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - secondary: { - background: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + primary: { + background: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + secondary: { + background: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }), + { defaultTheme }, +); function CustomColumnMenuComponent(props) { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx b/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx index 74ce20470e86f..f576e20f3cb69 100644 --- a/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx +++ b/docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { GridColumnMenu, @@ -12,16 +13,20 @@ import { } from '@material-ui/x-grid'; import StarOutlineIcon from '@material-ui/icons/StarOutline'; -const useStyles = makeStyles((theme) => ({ - primary: { - background: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - secondary: { - background: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => ({ + primary: { + background: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + secondary: { + background: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }), + { defaultTheme }, +); export function CustomColumnMenuComponent( props: GridColumnMenuProps & { color: string }, diff --git a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js index 1a5bf1d9386de..2c36b22007345 100644 --- a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js +++ b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js @@ -1,32 +1,37 @@ import * as React from 'react'; import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - flexDirection: 'column', - '& .ant-empty-img-1': { - fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + flexDirection: 'column', + '& .ant-empty-img-1': { + fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', + }, + '& .ant-empty-img-2': { + fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + }, + '& .ant-empty-img-3': { + fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', + }, + '& .ant-empty-img-4': { + fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', + }, + '& .ant-empty-img-5': { + fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', + fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', + }, }, - '& .ant-empty-img-2': { - fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + label: { + marginTop: theme.spacing(1), }, - '& .ant-empty-img-3': { - fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', - }, - '& .ant-empty-img-4': { - fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', - }, - '& .ant-empty-img-5': { - fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', - fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', - }, - }, - label: { - marginTop: theme.spacing(1), - }, -})); + }), + { defaultTheme }, +); function CustomNoRowsOverlay() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx index b5eccbfb61a2d..25e8ba784b875 100644 --- a/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx +++ b/docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx @@ -1,33 +1,37 @@ import * as React from 'react'; import { GridOverlay, DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - flexDirection: 'column', - '& .ant-empty-img-1': { - fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + flexDirection: 'column', + '& .ant-empty-img-1': { + fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626', + }, + '& .ant-empty-img-2': { + fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + }, + '& .ant-empty-img-3': { + fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', + }, + '& .ant-empty-img-4': { + fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', + }, + '& .ant-empty-img-5': { + fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', + fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', + }, }, - '& .ant-empty-img-2': { - fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959', + label: { + marginTop: theme.spacing(1), }, - '& .ant-empty-img-3': { - fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343', - }, - '& .ant-empty-img-4': { - fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c', - }, - '& .ant-empty-img-5': { - fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08', - fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff', - }, - }, - label: { - marginTop: theme.spacing(1), - }, - }), + }), + { defaultTheme }, ); function CustomNoRowsOverlay() { diff --git a/docs/src/pages/components/data-grid/components/CustomFooter.js b/docs/src/pages/components/data-grid/components/CustomFooter.js index 6d43c0012340f..fb76e7e032aa1 100644 --- a/docs/src/pages/components/data-grid/components/CustomFooter.js +++ b/docs/src/pages/components/data-grid/components/CustomFooter.js @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import { DataGrid } from '@material-ui/data-grid'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { padding: 10, display: 'flex', @@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({ marginRight: 2, color: '#d9182e', }, -})); +}); function CustomFooterStatusComponent(props) { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/components/CustomFooter.tsx b/docs/src/pages/components/data-grid/components/CustomFooter.tsx index 186fb61f4a115..9a117aeaa864b 100644 --- a/docs/src/pages/components/data-grid/components/CustomFooter.tsx +++ b/docs/src/pages/components/data-grid/components/CustomFooter.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import { DataGrid } from '@material-ui/data-grid'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { padding: 10, display: 'flex', @@ -18,7 +18,7 @@ const useStyles = makeStyles(() => ({ marginRight: 2, color: '#d9182e', }, -})); +}); export function CustomFooterStatusComponent(props: { status: 'connected' | 'disconnected'; diff --git a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js index 83e02fcccf5f5..7a6c245ad52bc 100644 --- a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js +++ b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import Pagination from '@material-ui/lab/Pagination'; diff --git a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.tsx b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.tsx index 83e02fcccf5f5..7a6c245ad52bc 100644 --- a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import Pagination from '@material-ui/lab/Pagination'; diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js index 0ad38c395ff3b..81b1aae4d1ccb 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import { XGrid, GridToolbar } from '@material-ui/x-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import FormControl from '@material-ui/core/FormControl'; import FormGroup from '@material-ui/core/FormGroup'; import Button from '@material-ui/core/Button'; @@ -11,108 +12,153 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStylesAntDesign = makeStyles( + (theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, + }, }, - }, -})); + }), + { defaultTheme }, +); -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - height: 600, - width: '100%', - '& .MuiFormGroup-options': { - alignItems: 'center', - paddingBottom: theme.spacing(1), - '& > div': { - minWidth: 100, - margin: theme.spacing(2, 2, 2, 0), +const useStyles = makeStyles( + (theme) => ({ + root: { + display: 'flex', + flexDirection: 'column', + height: 600, + width: '100%', + '& .MuiFormGroup-options': { + alignItems: 'center', + paddingBottom: theme.spacing(1), + '& > div': { + minWidth: 100, + margin: theme.spacing(2, 2, 2, 0), + }, }, }, - }, -})); + }), + { defaultTheme }, +); function SettingsPanel(props) { const { onApply, type, size, theme } = props; diff --git a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx index 3af47b9c0c514..ed3587223a186 100644 --- a/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx +++ b/docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { XGrid, GridToolbar } from '@material-ui/x-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; import FormControl from '@material-ui/core/FormControl'; import FormGroup from '@material-ui/core/FormGroup'; import Button from '@material-ui/core/Button'; @@ -10,108 +11,153 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; -const useStylesAntDesign = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStylesAntDesign = makeStyles( + (theme) => ({ + root: { + border: `1px solid ${theme.palette.type === 'light' ? '#f0f0f0' : '#303030'}`, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, - }, - '& .MuiCheckbox-root svg': { - width: 16, - height: 16, - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' - }`, - borderRadius: 2, - }, - '& .MuiCheckbox-root svg path': { - display: 'none', - }, - '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { - backgroundColor: '#1890ff', - borderColor: '#1890ff', - }, - '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { - position: 'absolute', - display: 'table', - border: '2px solid #fff', - borderTop: 0, - borderLeft: 0, - transform: 'rotate(45deg) translate(-50%,-50%)', - opacity: 1, - transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', - content: '""', - top: '50%', - left: '39%', - width: 5.71428571, - height: 9.14285714, - }, - '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { - width: 8, - height: 8, - backgroundColor: '#1890ff', - transform: 'none', - top: '39%', - border: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + '& .MuiCheckbox-root svg': { + width: 16, + height: 16, + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.type === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)' + }`, + borderRadius: 2, + }, + '& .MuiCheckbox-root svg path': { + display: 'none', + }, + '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': { + backgroundColor: '#1890ff', + borderColor: '#1890ff', + }, + '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': { + position: 'absolute', + display: 'table', + border: '2px solid #fff', + borderTop: 0, + borderLeft: 0, + transform: 'rotate(45deg) translate(-50%,-50%)', + opacity: 1, + transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s', + content: '""', + top: '50%', + left: '39%', + width: 5.71428571, + height: 9.14285714, + }, + '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': { + width: 8, + height: 8, + backgroundColor: '#1890ff', + transform: 'none', + top: '39%', + border: 0, + }, + }, }, - }, -})); + }), + { defaultTheme }, +); -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - height: 600, - width: '100%', - '& .MuiFormGroup-options': { - alignItems: 'center', - paddingBottom: theme.spacing(1), - '& > div': { - minWidth: 100, - margin: theme.spacing(2, 2, 2, 0), +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + display: 'flex', + flexDirection: 'column', + height: 600, + width: '100%', + '& .MuiFormGroup-options': { + alignItems: 'center', + paddingBottom: theme.spacing(1), + '& > div': { + minWidth: 100, + margin: theme.spacing(2, 2, 2, 0), + }, }, }, - }, -})); + }), + { defaultTheme }, +); type GridDataType = 'Employee' | 'Commodity'; type GridDataThemeOption = 'default' | 'ant'; diff --git a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js index d234df2b75638..aa6180b54c379 100644 --- a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js +++ b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { randomCreatedDate, @@ -8,17 +9,21 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const backgroundColor = - getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor, +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const backgroundColor = + getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor, + }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function IsCellEditableGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx index 9e7f53bbcf612..85b239b410d13 100644 --- a/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode, @@ -13,17 +14,21 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const backgroundColor = - getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor, +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const backgroundColor = + getThemePaletteMode(theme.palette) === 'dark' ? '#376331' : 'rgb(217 243 190)'; + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor, + }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function IsCellEditableGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js index 271af33de5814..06cdb4b3b7798 100644 --- a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js +++ b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Rating from '@material-ui/lab/Rating'; import { DataGrid } from '@material-ui/data-grid'; diff --git a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx index 660d823632e26..4e5973af1bb53 100644 --- a/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Rating from '@material-ui/lab/Rating'; import { DataGrid, GridCellParams } from '@material-ui/data-grid'; diff --git a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js index aa09399d29e51..f54ee71bea3a6 100644 --- a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js +++ b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js @@ -8,15 +8,20 @@ import { randomTraderName, randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - justifyContent: 'center', - display: 'flex', - borderBottom: `1px solid ${theme.palette.divider}`, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + justifyContent: 'center', + display: 'flex', + borderBottom: `1px solid ${theme.palette.divider}`, + }, + }), + { defaultTheme }, +); function EditToolbar(props) { const { selectedCellParams, apiRef, setSelectedCellParams } = props; diff --git a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx index 4f37e2d8966b6..79a356bfda026 100644 --- a/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx @@ -14,15 +14,20 @@ import { randomTraderName, randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => ({ - root: { - justifyContent: 'center', - display: 'flex', - borderBottom: `1px solid ${theme.palette.divider}`, - }, -})); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => ({ + root: { + justifyContent: 'center', + display: 'flex', + borderBottom: `1px solid ${theme.palette.divider}`, + }, + }), + { defaultTheme }, +); interface EditToolbarProps { apiRef: GridApiRef; diff --git a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js index 1f8059e6fbef4..73416694698a8 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.js @@ -1,25 +1,30 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, useGridApiRef, XGrid } from '@material-ui/x-grid'; import { randomEmail, randomTraderName } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx index 6cbb9d14614f2..36257d592ff64 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateCellApiRefGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { getThemePaletteMode, GridColumns, @@ -11,22 +12,26 @@ import { } from '@material-ui/x-grid'; import { randomEmail, randomTraderName } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js index 1525afc9514bf..3a906e55b702c 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { randomCreatedDate, @@ -9,22 +10,26 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx index ef68467d87f58..d552db17a3a14 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid, getThemePaletteMode, @@ -16,22 +17,26 @@ import { randomUpdatedDate, } from '@material-ui/x-grid-data-generator'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', + return { + root: { + '& .MuiDataGrid-cellEditing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; diff --git a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js index 054d5029b317b..ffe89a69202e7 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js +++ b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js @@ -1,23 +1,28 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useGridApiRef, getThemePaletteMode, XGrid } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); let promiseTimeout; function validateName(username) { diff --git a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx index 75d7d63e16d1a..b118ae96501b1 100644 --- a/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx +++ b/docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-use-before-define */ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { GridColumns, GridEditCellPropsParams, @@ -10,21 +11,25 @@ import { XGrid, } from '@material-ui/x-grid'; -const useStyles = makeStyles((theme: Theme) => { - const isDark = getThemePaletteMode(theme.palette) === 'dark'; +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const isDark = getThemePaletteMode(theme.palette) === 'dark'; - return { - root: { - '& .MuiDataGrid-cellEditable': { - backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + return { + root: { + '& .MuiDataGrid-cellEditable': { + backgroundColor: isDark ? '#376331' : 'rgb(217 243 190)', + }, + '& .Mui-error': { + backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, + color: isDark ? '#ff4343' : '#750f0f', + }, }, - '& .Mui-error': { - backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, - color: isDark ? '#ff4343' : '#750f0f', - }, - }, - }; -}); + }; + }, + { defaultTheme }, +); let promiseTimeout: any; function validateName(username: string): Promise { diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js index 0dd838f20ddf4..6cf274cf97713 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; diff --git a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx index 797da82a077c8..27c7bd0a26cc8 100644 --- a/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx +++ b/docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { GridFilterInputValueProps, diff --git a/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.js b/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.js index ca359dbd5c4a0..a5cdf629afb38 100644 --- a/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.js +++ b/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid, getGridNumericColumnOperators } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; diff --git a/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.tsx b/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.tsx index 12c89cc7c11f5..e2a423392171e 100644 --- a/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.tsx +++ b/docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { Rating } from '@material-ui/lab'; import { DataGrid, diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.js b/docs/src/pages/components/data-grid/style/AntDesignGrid.js index ebcea4b1a2b86..4942ae266b064 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.js +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.js @@ -1,7 +1,8 @@ import * as React from 'react'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -49,53 +50,59 @@ function customCheckbox(theme) { }; } -const useStyles = makeStyles((theme) => ({ - root: { - border: 0, - color: - theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => ({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), - }, -})); + }), + { defaultTheme }, +); function CustomPagination() { const { state, apiRef } = useGridSlotComponentProps(); diff --git a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx index 53e64071009d7..93efd8ba6e9fa 100644 --- a/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx +++ b/docs/src/pages/components/data-grid/style/AntDesignGrid.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -49,56 +50,59 @@ function customCheckbox(theme: Theme) { }; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - border: 0, - color: - theme.palette.type === 'light' - ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - WebkitFontSmoothing: 'auto', - letterSpacing: 'normal', - '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', - }, - '& .MuiDataGrid-iconSeparator': { - display: 'none', - }, - '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { - borderRight: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { - borderBottom: `1px solid ${ - theme.palette.type === 'light' ? '#f0f0f0' : '#303030' - }`, - }, - '& .MuiDataGrid-cell': { +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + border: 0, color: theme.palette.type === 'light' ? 'rgba(0,0,0,.85)' - : 'rgba(255,255,255,0.65)', - }, - '& .MuiPaginationItem-root': { - borderRadius: 0, + : 'rgba(255,255,255,0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + WebkitFontSmoothing: 'auto', + letterSpacing: 'normal', + '& .MuiDataGrid-columnsContainer': { + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + }, + '& .MuiDataGrid-iconSeparator': { + display: 'none', + }, + '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': { + borderRight: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.type === 'light' ? '#f0f0f0' : '#303030' + }`, + }, + '& .MuiDataGrid-cell': { + color: + theme.palette.type === 'light' + ? 'rgba(0,0,0,.85)' + : 'rgba(255,255,255,0.65)', + }, + '& .MuiPaginationItem-root': { + borderRadius: 0, + }, + ...customCheckbox(theme), }, - ...customCheckbox(theme), - }, - }), + }), + { defaultTheme }, ); function CustomPagination() { diff --git a/docs/src/pages/components/data-grid/style/StylingCellsGrid.js b/docs/src/pages/components/data-grid/style/StylingCellsGrid.js index a8edc1496dfd4..e4bf66494fd6e 100644 --- a/docs/src/pages/components/data-grid/style/StylingCellsGrid.js +++ b/docs/src/pages/components/data-grid/style/StylingCellsGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import { DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns = [ { diff --git a/docs/src/pages/components/data-grid/style/StylingCellsGrid.tsx b/docs/src/pages/components/data-grid/style/StylingCellsGrid.tsx index 3b928c1da0bb4..10d115f40b34e 100644 --- a/docs/src/pages/components/data-grid/style/StylingCellsGrid.tsx +++ b/docs/src/pages/components/data-grid/style/StylingCellsGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridColumns, DataGrid, GridCellClassParams } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns: GridColumns = [ { diff --git a/docs/src/pages/components/data-grid/style/StylingHeaderGrid.js b/docs/src/pages/components/data-grid/style/StylingHeaderGrid.js index 46c597be43554..cf785c7ef55a1 100644 --- a/docs/src/pages/components/data-grid/style/StylingHeaderGrid.js +++ b/docs/src/pages/components/data-grid/style/StylingHeaderGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns = [ { diff --git a/docs/src/pages/components/data-grid/style/StylingHeaderGrid.tsx b/docs/src/pages/components/data-grid/style/StylingHeaderGrid.tsx index 78e99fb449ae4..3655d01feca0d 100644 --- a/docs/src/pages/components/data-grid/style/StylingHeaderGrid.tsx +++ b/docs/src/pages/components/data-grid/style/StylingHeaderGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { GridColumns, DataGrid } from '@material-ui/data-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const columns: GridColumns = [ { diff --git a/docs/src/pages/components/data-grid/style/StylingRowsGrid.js b/docs/src/pages/components/data-grid/style/StylingRowsGrid.js index 775cf218b8c9e..0ec84edbdb68c 100644 --- a/docs/src/pages/components/data-grid/style/StylingRowsGrid.js +++ b/docs/src/pages/components/data-grid/style/StylingRowsGrid.js @@ -1,48 +1,53 @@ import * as React from 'react'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles, darken, lighten } from '@material-ui/core/styles'; +import { createMuiTheme, darken, lighten } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => { - const getBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.6) - : lighten(color, 0.6); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme) => { + const getBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.6) + : lighten(color, 0.6); - const getHoverBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.5) - : lighten(color, 0.5); + const getHoverBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.5) + : lighten(color, 0.5); - return { - root: { - '& .super-app-theme--Open': { - backgroundColor: getBackgroundColor(theme.palette.info.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + return { + root: { + '& .super-app-theme--Open': { + backgroundColor: getBackgroundColor(theme.palette.info.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + }, }, - }, - '& .super-app-theme--Filled': { - backgroundColor: getBackgroundColor(theme.palette.success.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + '& .super-app-theme--Filled': { + backgroundColor: getBackgroundColor(theme.palette.success.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + }, }, - }, - '& .super-app-theme--PartiallyFilled': { - backgroundColor: getBackgroundColor(theme.palette.warning.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + '& .super-app-theme--PartiallyFilled': { + backgroundColor: getBackgroundColor(theme.palette.warning.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + }, }, - }, - '& .super-app-theme--Rejected': { - backgroundColor: getBackgroundColor(theme.palette.error.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + '& .super-app-theme--Rejected': { + backgroundColor: getBackgroundColor(theme.palette.error.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + }, }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function StylingRowsGrid() { const classes = useStyles(); diff --git a/docs/src/pages/components/data-grid/style/StylingRowsGrid.tsx b/docs/src/pages/components/data-grid/style/StylingRowsGrid.tsx index 775cf218b8c9e..7333ec479756c 100644 --- a/docs/src/pages/components/data-grid/style/StylingRowsGrid.tsx +++ b/docs/src/pages/components/data-grid/style/StylingRowsGrid.tsx @@ -1,48 +1,53 @@ import * as React from 'react'; import { DataGrid, getThemePaletteMode } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; -import { makeStyles, darken, lighten } from '@material-ui/core/styles'; +import { createMuiTheme, darken, lighten, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; -const useStyles = makeStyles((theme) => { - const getBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.6) - : lighten(color, 0.6); +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => { + const getBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.6) + : lighten(color, 0.6); - const getHoverBackgroundColor = (color) => - getThemePaletteMode(theme.palette) === 'dark' - ? darken(color, 0.5) - : lighten(color, 0.5); + const getHoverBackgroundColor = (color) => + getThemePaletteMode(theme.palette) === 'dark' + ? darken(color, 0.5) + : lighten(color, 0.5); - return { - root: { - '& .super-app-theme--Open': { - backgroundColor: getBackgroundColor(theme.palette.info.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + return { + root: { + '& .super-app-theme--Open': { + backgroundColor: getBackgroundColor(theme.palette.info.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.info.main), + }, }, - }, - '& .super-app-theme--Filled': { - backgroundColor: getBackgroundColor(theme.palette.success.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + '& .super-app-theme--Filled': { + backgroundColor: getBackgroundColor(theme.palette.success.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.success.main), + }, }, - }, - '& .super-app-theme--PartiallyFilled': { - backgroundColor: getBackgroundColor(theme.palette.warning.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + '& .super-app-theme--PartiallyFilled': { + backgroundColor: getBackgroundColor(theme.palette.warning.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.warning.main), + }, }, - }, - '& .super-app-theme--Rejected': { - backgroundColor: getBackgroundColor(theme.palette.error.main), - '&:hover': { - backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + '& .super-app-theme--Rejected': { + backgroundColor: getBackgroundColor(theme.palette.error.main), + '&:hover': { + backgroundColor: getHoverBackgroundColor(theme.palette.error.main), + }, }, }, - }, - }; -}); + }; + }, + { defaultTheme }, +); export default function StylingRowsGrid() { const classes = useStyles(); diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index 0aaaeb37588bd..22d872d16eb29 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -1,36 +1,41 @@ import * as React from 'react'; import TablePagination from '@material-ui/core/TablePagination'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector'; import { optionsSelector } from '../hooks/utils/optionsSelector'; import { GridApiContext } from './GridApiContext'; -import { isMuiV5 } from '../utils'; +import { isMuiV5, createTheme } from '../utils'; +const defaultTheme = createTheme(); // Used to hide the Rows per page selector on small devices -const useStyles = makeStyles((theme: Theme) => ({ - selectLabel: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'block', - }, - }, - caption: { - // input label - '&[id]': { +const useStyles = makeStyles( + (theme: Theme) => ({ + selectLabel: { display: 'none', [theme.breakpoints.up('md')]: { display: 'block', }, }, - }, - input: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'inline-flex', + caption: { + // input label + '&[id]': { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'block', + }, + }, + }, + input: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'inline-flex', + }, }, - }, -})); + }), + { defaultTheme }, +); export const GridPagination = React.forwardRef< HTMLDivElement, diff --git a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts index c734e07cc42b0..1b98ac6a5766d 100644 --- a/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts +++ b/packages/grid/_modules_/grid/components/containers/GridRootStyles.ts @@ -1,6 +1,8 @@ -import { darken, lighten, makeStyles, Theme } from '@material-ui/core/styles'; -import { getThemePaletteMode, muiStyleAlpha } from '../../utils/utils'; +import { darken, lighten, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { getThemePaletteMode, muiStyleAlpha, createTheme } from '../../utils/utils'; +const defaultTheme = createTheme(); export const useStyles = makeStyles( (theme: Theme) => { const borderColor = @@ -377,5 +379,5 @@ export const useStyles = makeStyles( } return gridStyle; }, - { name: 'MuiDataGrid' }, + { name: 'MuiDataGrid', defaultTheme }, ); diff --git a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx index 35ad2c9920423..e028a85a4bb78 100644 --- a/packages/grid/_modules_/grid/components/menu/GridMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/GridMenu.tsx @@ -3,7 +3,9 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Grow from '@material-ui/core/Grow'; import Paper from '@material-ui/core/Paper'; import Popper, { PopperProps } from '@material-ui/core/Popper'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../utils/utils'; type MenuPosition = | 'bottom-end' @@ -20,6 +22,7 @@ type MenuPosition = | 'top' | undefined; +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { @@ -29,7 +32,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'MuiDataGridMenu' }, + { name: 'MuiDataGridMenu', defaultTheme }, ); export interface GridMenuProps extends Omit { diff --git a/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx index 97e755c24c653..6063cef69ae02 100644 --- a/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx @@ -4,7 +4,7 @@ import Switch from '@material-ui/core/Switch'; import Button from '@material-ui/core/Button'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { allGridColumnsSelector } from '../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { optionsSelector } from '../../hooks/utils/optionsSelector'; diff --git a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx index 550e2de7f495d..aabcf3646d21c 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanel.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanel.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import Paper from '@material-ui/core/Paper'; import Popper from '@material-ui/core/Popper'; import { GridApiContext } from '../GridApiContext'; -import { isEscapeKey, isMuiV5 } from '../../utils'; +import { isEscapeKey, isMuiV5, createTheme } from '../../utils'; export interface GridPanelProps extends React.HTMLAttributes { children?: React.ReactNode; open: boolean; } +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { @@ -23,7 +25,7 @@ const useStyles = makeStyles( display: 'flex', }, }), - { name: 'MuiDataGridPanel' }, + { name: 'MuiDataGridPanel', defaultTheme }, ); export const GridPanel = React.forwardRef(function GridPanel( diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx index b2090260c6a71..03d78117b5809 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelContent.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles( () => ({ diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx index 3c0e88d2f463b..291ce1da1153d 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelFooter.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles( () => ({ diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx index 978274fa391ef..793904bf64c82 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelHeader.tsx @@ -1,14 +1,17 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../utils/utils'; +const defaultTheme = createTheme(); const useStyles = makeStyles( (theme: Theme) => ({ root: { padding: theme.spacing(1), }, }), - { name: 'MuiDataGridPanelHeader' }, + { name: 'MuiDataGridPanelHeader', defaultTheme }, ); export function GridPanelHeader( diff --git a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx index 4bac5775d7f67..f32592ca8ae34 100644 --- a/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import TrapFocus from '@material-ui/core/Unstable_TrapFocus'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles( () => ({ diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx index e6cfab19afbbc..aa20f8fc9d7ef 100644 --- a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx @@ -4,7 +4,7 @@ import IconButton from '@material-ui/core/IconButton'; import InputLabel from '@material-ui/core/InputLabel'; import Select from '@material-ui/core/Select'; import { capitalize } from '@material-ui/core/utils'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { filterableGridColumnsSelector } from '../../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../../hooks/features/core/useGridSelector'; import { GridColDef } from '../../../models/colDef/gridColDef'; @@ -26,7 +26,7 @@ export interface GridFilterFormProps { } const useStyles = makeStyles( - () => ({ + { root: { display: 'flex', justifyContent: 'space-around', @@ -50,7 +50,7 @@ const useStyles = makeStyles( marginRight: 6, marginBottom: 2, }, - }), + }, { name: 'MuiDataGridFilterForm' }, ); diff --git a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx index 303c1a8093d0c..db03cb200240a 100644 --- a/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx +++ b/packages/grid/_modules_/grid/components/toolbar/GridFilterToolbarButton.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import Badge from '@material-ui/core/Badge'; import Button, { ButtonProps } from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; @@ -15,16 +16,18 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel import { optionsSelector } from '../../hooks/utils/optionsSelector'; import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; +import { createTheme } from '../../utils/utils'; import { GridApiContext } from '../GridApiContext'; +const defaultTheme = createTheme(); const useStyles = makeStyles( - (theme) => ({ + (theme: Theme) => ({ list: { margin: theme.spacing(1, 1, 0.5), padding: theme.spacing(0, 1), }, }), - { name: 'MuiDataGridFilterToolbarButton' }, + { name: 'MuiDataGridFilterToolbarButton', defaultTheme }, ); export const GridFilterToolbarButton = React.forwardRef( diff --git a/packages/grid/_modules_/grid/utils/utils.ts b/packages/grid/_modules_/grid/utils/utils.ts index 16717eb531fa7..6c222d16c8131 100644 --- a/packages/grid/_modules_/grid/utils/utils.ts +++ b/packages/grid/_modules_/grid/utils/utils.ts @@ -67,6 +67,13 @@ export function muiStyleAlpha(color: string, value: number): string { return (styles as any)?.fade(color, value); } +export function createTheme(): styles.Theme { + if (isMuiV5()) { + return (styles as any)?.createTheme(); + } + return (styles as any)?.createMuiTheme(); +} + export function localStorageAvailable() { try { // Incognito mode might reject access to the localStorage for security reasons. diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx index efa2500c58bfd..cb3b12fdb4d06 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderCountry.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { GridCellParams } from '@material-ui/x-grid'; // ISO 3166-1 alpha-2 diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx index 791fbbe07f0bf..f3b939b377e05 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderIncoterm.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Tooltip from '@material-ui/core/Tooltip'; import InfoIcon from '@material-ui/icons/Info'; import { GridCellParams, GridCellValue } from '@material-ui/x-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ root: { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx index 3fbfdb0f5f30b..3ff5c9fbc5df3 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderLink.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { GridCellParams } from '@material-ui/x-grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ root: { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx index 57915e41f43e6..2f9bf783fbf6f 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderPnl.tsx @@ -1,27 +1,32 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, getThemePaletteMode } from '../../../_modules_/grid'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - fontVariantNumeric: 'tabular-nums', - }, - positive: { - color: - getThemePaletteMode(theme.palette) === 'light' - ? theme.palette.success.dark - : theme.palette.success.light, - }, - negative: { - color: - getThemePaletteMode(theme.palette) === 'light' - ? theme.palette.error.dark - : theme.palette.error.light, - }, - }), +const defaultTheme = createTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + width: '100%', + fontVariantNumeric: 'tabular-nums', + }, + positive: { + color: + getThemePaletteMode(theme.palette) === 'light' + ? theme.palette.success.dark + : theme.palette.success.light, + }, + negative: { + color: + getThemePaletteMode(theme.palette) === 'light' + ? theme.palette.error.dark + : theme.palette.error.light, + }, + }), + { defaultTheme }, ); function pnlFormatter(value: number) { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx index 32500a1c41294..7874d1b31c933 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderProgress.tsx @@ -1,38 +1,43 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridCellParams } from '@material-ui/x-grid'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - border: `1px solid ${theme.palette.divider}`, - position: 'relative', - overflow: 'hidden', - width: '100%', - height: 26, - borderRadius: 2, - }, - value: { - position: 'absolute', - lineHeight: '24px', - width: '100%', - display: 'flex', - justifyContent: 'center', - }, - bar: { - height: '100%', - '&.low': { - backgroundColor: '#f44336', +const defaultTheme = createTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + border: `1px solid ${theme.palette.divider}`, + position: 'relative', + overflow: 'hidden', + width: '100%', + height: 26, + borderRadius: 2, }, - '&.medium': { - backgroundColor: '#efbb5aa3', + value: { + position: 'absolute', + lineHeight: '24px', + width: '100%', + display: 'flex', + justifyContent: 'center', }, - '&.high': { - backgroundColor: '#088208a3', + bar: { + height: '100%', + '&.low': { + backgroundColor: '#f44336', + }, + '&.medium': { + backgroundColor: '#efbb5aa3', + }, + '&.high': { + backgroundColor: '#088208a3', + }, }, - }, - }), + }), + { defaultTheme }, ); interface ProgressBarProps { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx index b51132a52af30..a1e0af4e68740 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderRating.tsx @@ -1,20 +1,25 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams } from '@material-ui/x-grid'; import Rating from '@material-ui/lab/Rating'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: 'flex', - alignItems: 'center', - lineHeight: '24px', - color: theme.palette.text.secondary, - '& .MuiRating-root': { - marginRight: theme.spacing(1), +const defaultTheme = createTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + display: 'flex', + alignItems: 'center', + lineHeight: '24px', + color: theme.palette.text.secondary, + '& .MuiRating-root': { + marginRight: theme.spacing(1), + }, }, - }, - }), + }), + { defaultTheme }, ); interface RatingValueProps { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx index 66606a6eed791..692d015b5343b 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderStatus.tsx @@ -6,33 +6,38 @@ import AutorenewIcon from '@material-ui/icons/Autorenew'; import DoneIcon from '@material-ui/icons/Done'; import Chip from '@material-ui/core/Chip'; import { GridCellParams } from '@material-ui/x-grid'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - justifyContent: 'left', - '& .icon': { - color: 'inherit', +const defaultTheme = createTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + justifyContent: 'left', + '& .icon': { + color: 'inherit', + }, }, - }, - Open: { - color: theme.palette.info.dark, - border: `1px solid ${theme.palette.info.main}`, - }, - Filled: { - color: theme.palette.success.dark, - border: `1px solid ${theme.palette.success.main}`, - }, - PartiallyFilled: { - color: theme.palette.warning.dark, - border: `1px solid ${theme.palette.warning.main}`, - }, - Rejected: { - color: theme.palette.error.dark, - border: `1px solid ${theme.palette.error.main}`, - }, - }), + Open: { + color: theme.palette.info.dark, + border: `1px solid ${theme.palette.info.main}`, + }, + Filled: { + color: theme.palette.success.dark, + border: `1px solid ${theme.palette.success.main}`, + }, + PartiallyFilled: { + color: theme.palette.warning.dark, + border: `1px solid ${theme.palette.warning.main}`, + }, + Rejected: { + color: theme.palette.error.dark, + border: `1px solid ${theme.palette.error.main}`, + }, + }), + { defaultTheme }, ); interface StatusProps { diff --git a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx index 70f4e27ed8c13..61831aeb71598 100644 --- a/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx +++ b/packages/grid/x-grid-data-generator/src/renderer/renderTotalPrice.tsx @@ -1,22 +1,27 @@ import * as React from 'react'; import clsx from 'clsx'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellParams, muiStyleAlpha } from '../../../_modules_/grid'; +import { createTheme } from '../../../_modules_/grid/utils/utils'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - paddingRight: 8, - fontVariantNumeric: 'tabular-nums', - }, - good: { - backgroundColor: muiStyleAlpha(theme.palette.success.main, 0.3), - }, - bad: { - backgroundColor: muiStyleAlpha(theme.palette.error.main, 0.3), - }, - }), +const defaultTheme = createTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + width: '100%', + paddingRight: 8, + fontVariantNumeric: 'tabular-nums', + }, + good: { + backgroundColor: muiStyleAlpha(theme.palette.success.main, 0.3), + }, + bad: { + backgroundColor: muiStyleAlpha(theme.palette.error.main, 0.3), + }, + }), + { defaultTheme }, ); interface TotalPriceProps { diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx index 469cc37e91bd2..950fb03d97609 100644 --- a/packages/storybook/src/stories/grid-filter.stories.tsx +++ b/packages/storybook/src/stories/grid-filter.stories.tsx @@ -1,6 +1,6 @@ import Button from '@material-ui/core/Button'; import InputAdornment from '@material-ui/core/InputAdornment'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; import { DataGrid } from '@material-ui/data-grid'; import Rating from '@material-ui/lab/Rating'; import { diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx index 409753bfc4848..8fa8ca4754598 100644 --- a/packages/storybook/src/stories/grid-rows.stories.tsx +++ b/packages/storybook/src/stories/grid-rows.stories.tsx @@ -4,7 +4,8 @@ import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import Popper from '@material-ui/core/Popper'; import Paper from '@material-ui/core/Paper'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import { GridCellValue, GridCellParams, @@ -188,25 +189,28 @@ interface GridCellExpandProps { width: number; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - alignItems: 'center', - lineHeight: '24px', - width: '100%', - height: '100%', - position: 'relative', - display: 'flex', - '& .MuiRating-root': { - marginRight: theme.spacing(1), - }, - '& .cellValue': { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + alignItems: 'center', + lineHeight: '24px', + width: '100%', + height: '100%', + position: 'relative', + display: 'flex', + '& .MuiRating-root': { + marginRight: theme.spacing(1), + }, + '& .cellValue': { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, }, - }, - }), + }), + { defaultTheme }, ); const GridCellExpand = React.memo(function CellExpand(props: GridCellExpandProps) { const { width, value } = props; diff --git a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx index 7d5fd56566b8f..ad5a39f1bc943 100644 --- a/packages/storybook/src/stories/playground/RecipeReviewCard.tsx +++ b/packages/storybook/src/stories/playground/RecipeReviewCard.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { createMuiTheme, Theme } from '@material-ui/core/styles'; +import { createStyles, makeStyles } from '@material-ui/styles'; import clsx from 'clsx'; import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; @@ -16,29 +17,32 @@ import ShareIcon from '@material-ui/icons/Share'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import MoreVertIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - maxWidth: 345, - }, - media: { - height: 0, - paddingTop: '56.25%', // 16:9 - }, - expand: { - transform: 'rotate(0deg)', - marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), - }, - expandOpen: { - transform: 'rotate(180deg)', - }, - avatar: { - backgroundColor: red[500], - }, - }), +const defaultTheme = createMuiTheme(); +const useStyles = makeStyles( + (theme: Theme) => + createStyles({ + root: { + maxWidth: 345, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + expand: { + transform: 'rotate(0deg)', + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + }, + expandOpen: { + transform: 'rotate(180deg)', + }, + avatar: { + backgroundColor: red[500], + }, + }), + { defaultTheme }, ); export default function RecipeReviewCard() {