[data grid] dark mode broken when wrapped in Card component

[KaralyosBela]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-pofbrq?file=src%2Fdemo.tsx
2. Inspect the datagrid, once Card removed, it works.

Current behavior

Datagrid dark mode is messed up.

Expected behavior

Datagrid should be using dark mode correctly.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
     System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base: ^5.0.0-beta.26 => 5.0.0-beta.35
    @mui/icons-material: ^5.16.7 => 5.16.7
    @mui/lab: 5.0.0-alpha.141 => 5.0.0-alpha.141
    @mui/material: ^5.16.7 => 5.16.7
    @mui/x-data-grid-premium: ^7.20.0 => 7.20.0
    @mui/x-date-pickers:  7.21.0
    @mui/x-license: ^7.20.0 => 7.20.0
    @mui/x-tree-view-pro: ^7.20.0 => 7.20.0
    @types/react: 18.2.33 => 18.2.33
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: 5.3.6 => 5.3.6
    typescript: ~5.2.2 => 5.2.2

Search keywords: dark mode, datagrid
Order ID: 86461

[michelengelen]

Duplicate of #15502
Related issue to track progress on this: #15517

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@KaralyosBela How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.