[data grid] Use styled from system

[siriwatknp]

The changes contain 2 patterns:

1. A simple conversion from @mui/material/styles to @mui/system.

These component does not use Material UI theme tokens, so I think it is safe to start using @mui/system.

2. Migrate from Material UI theme token to DataGrid CSS variables. These variables are defined by a single GridRootStyles.

Here is what it looks like when we have Joy UI integrated:

// /material/GridRootStyles.ts
export const GridRootStyles = styled('div', {
  name: 'MuiDataGrid',
  slot: 'Root',
})(({ theme }) => {
  return {
    // we could use --unstable_DataGrid-radius as a prefix at the beginning and keep refining until we are ready to ship CSS variables
    '--DataGrid-radius': theme.shape.borderRadius,
    '--DataGrid-headWeight': theme.typography.fontWeightMedium,
    '--DataGrid-overlayBackground': theme.vars
      ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
      : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
      …
  }
})


// /joy/GridRootStyles.ts
export const GridRootStyles = styled('div', {
  name: 'MuiDataGrid',
  slot: 'Root',
})(({ theme }) => {
  return {
    // we could use --unstable_DataGrid-radius as a prefix at the beginning and keep refining until we are ready to ship CSS variables
    '--DataGrid-radius': theme.vars.radius.sm,
    '--DataGrid-headWeight': theme.vars.fontWeight.md,
    '--DataGrid-overlayBackground': `rgba(${theme.vars.palette.neutral.darkChannel} / 0.5)`,
      …
  }
})

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8032--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	728.9	1,386.9	728.9	1,003.1	222.196
Sort 100k rows	ms	775.8	1,406.3	1,226.8	1,147.98	206.336
Select 100k rows	ms	293.8	613.1	335.5	391.8	116.135
Deselect 100k rows	ms	181.5	331.3	292.2	258.54	59.639

Generated by 🚫 dangerJS against 9a1af1a

[flaviendelangle]

Based on mui/material-ui#35840, could we use nested imports here ?

[siriwatknp]

styled is exported directly from the index. It does not have a nested folder after the build. We could improve it on the core but it should not block this PR.

Both of these are the same (in terms of efficiency).

import { styled } from '@mui/material/styles';
import { styled } from '@mui/system';

[cherniavskii]

🎉

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[siriwatknp]

@cherniavskii I decided to add unstable_ prefix to the new CSS variables to implicitly keep them private at the time being. Once we have Joy UI and are ready to share this with the community, we can remove them.

Note, I think we can just use a simple string for referring to a CSS variable since the syntax --unstable_DataGrid-* is pretty unique.