[data grid] Joy UI and Material together breaks pinned columns

[egazarian]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/joy-ui-integrations-material-ui-forked-ywkznn

Steps:

1. Hover a row.

Current behavior

You can see the content of the underlying cell over the pinned column.

Expected behavior

You should not see the content of the underlying cell.
It seems to be related to the following css. It sets a transparent background color (#0000000a).

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.0
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.89 ✅ 
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @emotion/react: ^11.10.4 => 11.13.0 
    @emotion/styled: ^11.10.4 => 11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.5 
    @mui/icons-material: ^5.10.6 => 5.16.5 
    @mui/joy: ^5.0.0-beta.48 => 5.0.0-beta.48 
    @mui/material: ^5.11.12 => 5.16.5 
    @mui/private-theming:  5.16.5 
    @mui/styled-engine:  5.16.4 
    @mui/system:  5.16.5 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-charts:  7.17.0 
    @mui/x-charts-pro: 7.0.0-beta.1 => 7.0.0-beta.1 
    @mui/x-charts-vendor:  7.16.0 
    @mui/x-data-grid:  7.18.0 
    @mui/x-data-grid-premium: ^7.18.0 => 7.18.0 
    @mui/x-data-grid-pro:  7.18.0 
    @mui/x-date-pickers:  7.17.0 
    @mui/x-date-pickers-pro: ^7.11.1 => 7.17.0 
    @mui/x-internals:  7.17.0 
    @mui/x-license:  7.17.0 
    @types/react: ^18.0.0 => 18.3.3 
    react: ^18.0.2 => 18.3.1 
    react-dom: ^18.0.2 => 18.3.1 
    typescript: ^4.1.2 => 4.9.5 

Search keywords: pinned columns transparent background
Order ID: 75174

[michelengelen]

Yes, the Background needs to be a full color without opacity. Development on JoyUi is currently on hold and we do not actively support it atm, so you would have to overwrite it in your sx prop or by setting the var yourself. There is a related issue here: #7883

sx={{
  "& .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row:hover .MuiDataGrid-cell--pinnedRight":
    {
      backgroundColor: "green",
    },
}}

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.