[DataGridPro V7] 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