[core] Remove makeStyles dependency on @material-ui/core/styles (#…

…1627)
mui · May 18, 2021 · 40ebf9b · 40ebf9b
1 parent 5889e3d
commit 40ebf9b
Show file tree

Hide file tree

Showing 62 changed files with 995 additions and 755 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';