[core] Prepare for material v6 (#14143)

Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Aug 21, 2024 · e570b4b · e570b4b
1 parent e0f0b86
commit e570b4b
Show file tree

Hide file tree

Showing 71 changed files with 824 additions and 596 deletions.
diff --git a/docs/data/charts/styling/SxStyling.js b/docs/data/charts/styling/SxStyling.js
@@ -30,10 +30,16 @@ export default function SxStyling() {
             fill: '#006BD6',
           },
         },
-        border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`,
-        backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`,
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        backgroundImage:
+          'linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
         backgroundSize: '35px 35px',
         backgroundPosition: '20px 20px, 20px 20px',
+        ...theme.applyStyles('dark', {
+          borderColor: 'rgba(255,255,255, 0.1)',
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255, 0.1) 1px, transparent 1px)',
+        }),
       })}
       xAxis={[{ scaleType: 'band', data: labels }]}
       series={[

diff --git a/docs/data/charts/styling/SxStyling.tsx b/docs/data/charts/styling/SxStyling.tsx
@@ -30,11 +30,16 @@ export default function SxStyling(): React.JSX.Element {
             fill: '#006BD6',
           },
         },
-
-        border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`,
-        backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`,
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        backgroundImage:
+          'linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
         backgroundSize: '35px 35px',
         backgroundPosition: '20px 20px, 20px 20px',
+        ...theme.applyStyles('dark', {
+          borderColor: 'rgba(255,255,255, 0.1)',
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255, 0.1) 1px, transparent 1px)',
+        }),
       })}
       xAxis={[{ scaleType: 'band', data: labels }]}
       series={[

diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
@@ -4,18 +4,20 @@ import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const lightBorderColor = lighten(alpha(theme.palette.divider, 1), 0.88);
+  const darkBorderColor = darken(alpha(theme.palette.divider, 1), 0.68);
 
   const selectedCellBorder = alpha(theme.palette.primary.main, 0.5);
 
   return {
     [`& .${gridClasses.cell}`]: {
       border: `1px solid transparent`,
-      borderRight: `1px solid ${borderColor}`,
-      borderBottom: `1px solid ${borderColor}`,
+      borderRight: `1px solid ${lightBorderColor}`,
+      borderBottom: `1px solid ${lightBorderColor}`,
+      ...theme.applyStyles('dark', {
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
+      }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {
       borderColor: alpha(theme.palette.primary.main, 0.1),

diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
@@ -4,18 +4,20 @@ import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const lightBorderColor = lighten(alpha(theme.palette.divider, 1), 0.88);
+  const darkBorderColor = darken(alpha(theme.palette.divider, 1), 0.68);
 
   const selectedCellBorder = alpha(theme.palette.primary.main, 0.5);
 
   return {
     [`& .${gridClasses.cell}`]: {
       border: `1px solid transparent`,
-      borderRight: `1px solid ${borderColor}`,
-      borderBottom: `1px solid ${borderColor}`,
+      borderRight: `1px solid ${lightBorderColor}`,
+      borderBottom: `1px solid ${lightBorderColor}`,
+      ...theme.applyStyles('dark', {
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
+      }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {
       borderColor: alpha(theme.palette.primary.main, 0.1),

diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js
@@ -15,9 +15,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 
 const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
-  border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  border: '1px solid #303030',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -33,24 +32,28 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+    color: 'rgba(255,255,255,0.85)',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -66,26 +69,31 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
     WebkitFontSmoothing: 'auto',
     letterSpacing: 'normal',
     '& .MuiDataGrid-columnsContainer': {
-      backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+      backgroundColor: '#1d1d1d',
+      ...theme.applyStyles('light', {
+        backgroundColor: '#fafafa',
+      }),
     },
     '& .MuiDataGrid-iconSeparator': {
       display: 'none',
     },
     '& .MuiDataGrid-colCell, .MuiDataGrid-cell': {
-      borderRight: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderRight: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderRightColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-      borderBottom: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderBottom: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderBottomColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-cell': {
-      color:
-        theme.palette.mode === 'light'
-          ? 'rgba(0,0,0,.85)'
-          : 'rgba(255,255,255,0.65)',
+      color: 'rgba(255,255,255,0.65)',
+      ...theme.applyStyles('light', {
+        color: 'rgba(0,0,0,.85)',
+      }),
     },
     '& .MuiPaginationItem-root': {
       borderRadius: 0,
@@ -94,10 +102,11 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid rgb(67, 67, 67)',
       borderRadius: 2,
+      ...theme.applyStyles('light', {
+        borderColor: '#d9d9d9',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -129,7 +138,14 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       top: '39%',
       border: 0,
     },
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
+  ...theme.applyStyles('light', {
+    borderColor: '#f0f0f0',
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 const StyledBox = styled('div')(({ theme }) => ({

diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx
@@ -15,9 +15,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectProps } from '@mui/material/Select';
 
 const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
-  border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  border: '1px solid #303030',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -33,24 +32,28 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+    color: 'rgba(255,255,255,0.85)',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -66,26 +69,31 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
     WebkitFontSmoothing: 'auto',
     letterSpacing: 'normal',
     '& .MuiDataGrid-columnsContainer': {
-      backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+      backgroundColor: '#1d1d1d',
+      ...theme.applyStyles('light', {
+        backgroundColor: '#fafafa',
+      }),
     },
     '& .MuiDataGrid-iconSeparator': {
       display: 'none',
     },
     '& .MuiDataGrid-colCell, .MuiDataGrid-cell': {
-      borderRight: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderRight: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderRightColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-      borderBottom: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderBottom: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderBottomColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-cell': {
-      color:
-        theme.palette.mode === 'light'
-          ? 'rgba(0,0,0,.85)'
-          : 'rgba(255,255,255,0.65)',
+      color: 'rgba(255,255,255,0.65)',
+      ...theme.applyStyles('light', {
+        color: 'rgba(0,0,0,.85)',
+      }),
     },
     '& .MuiPaginationItem-root': {
       borderRadius: 0,
@@ -94,10 +102,11 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid rgb(67, 67, 67)',
       borderRadius: 2,
+      ...theme.applyStyles('light', {
+        borderColor: '#d9d9d9',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -129,7 +138,14 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       top: '39%',
       border: 0,
     },
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
+  ...theme.applyStyles('light', {
+    borderColor: '#f0f0f0',
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 const StyledBox = styled('div')(({ theme }) => ({

diff --git a/docs/data/data-grid/editing/IsCellEditableGrid.js b/docs/data/data-grid/editing/IsCellEditableGrid.js
@@ -10,14 +10,16 @@ import {
 export default function IsCellEditableGrid() {
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '& .MuiDataGrid-cell--editable': {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+          bgcolor: 'rgb(217 243 190)',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#376331',
+          }),
         },
-      }}
+      })}
     >
       <DataGrid
         rows={rows}

diff --git a/docs/data/data-grid/editing/IsCellEditableGrid.tsx b/docs/data/data-grid/editing/IsCellEditableGrid.tsx
@@ -10,14 +10,16 @@ import {
 export default function IsCellEditableGrid() {
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '& .MuiDataGrid-cell--editable': {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+          bgcolor: 'rgb(217 243 190)',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#376331',
+          }),
         },
-      }}
+      })}
     >
       <DataGrid
         rows={rows}