[DataGridPro V6] Joy UI and Material together breaks column headers

[egazarian]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/ngjcsh. It is a fork of the Using Joy UI and Material UI together example.

Steps:

1. Try to scroll to the right, you will see that headers start to be misaligned.
2. Pin a column to the left, headers are misaligned too.

Current behavior 😯

I think the headers are moving to the left instead of moving to the right. The translate3d offset of the MuiDataGrid-columnHeadersInner div should be the opposite number.

Enregistrement.de.l.ecran.2023-09-22.a.10.10.14.mov

The offset is wrong because theme.direction in useGridColumnHeaders.tsx at line 160 returns undefined instead of ltr.

I also noticed that theme.direction returns ltr if I log it from the grid.tsx file.

Should this issue be opened on the mui/material-ui repository? 🤷‍♂️

Expected behavior 🤔

The column headers should move from left to right.

Context 🔦

I migrated to DataGridPremium v6 and started to have those issues. V5 was working fine with the same configuration.

Your environment 🌎

npx @mui/envinfo

I am using Chrome 116.0.5845.187.

   System:
    OS: macOS 13.5.2
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Firefox: 117.0.1
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.1 
    @emotion/styled: ^11.10.6 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/icons-material: ^5.11.11 => 5.14.9 
    @mui/joy: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @mui/material: ^5.11.12 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @mui/x-data-grid:  6.14.0 
    @mui/x-data-grid-premium: ^6.14.0 => 6.14.0 
    @mui/x-data-grid-pro:  6.14.0 
    @mui/x-date-pickers:  5.0.20 
    @mui/x-date-pickers-pro: ^5.0.20 => 5.0.20 
    @mui/x-license-pro:  6.10.2 
    @types/react: ^18.0.0 => 18.2.22 
    react: ^18.0.2 => 18.2.0 
    react-dom: ^18.0.2 => 18.2.0 
    typescript: ^4.1.2 => 4.9.5 

Order ID or Support key 💳 (optional)

75174

[egazarian]

I think importing useTheme from "@mui/material/styles" instead of "@mui/system" should fix this issue.
theme.direction is nested in the theme.$$material object when imported from "@mui/system" instead of being at the root of the theme object.

⚠️ A workaround to fix the issue: ⚠️

<JoyCssVarsProvider theme={{ ...theme, direction: "ltr" } as any}>
Example here: https://codesandbox.io/s/using-joy-ui-and-material-ui-together-forked-g8hjf4?file=/demo.tsx