[docs] Fix missing dependency in the DataGrid demo

[m4theushw]

• I have followed (at least) the PR section of the contributing guide.

Fixes #27629

The DataGrid component depends on @material-ui/styles. In v4, this package is a dependency of @material-ui/core. However, in v5 it became optional. When the demo is opened in CodeSandbox, it collects all imports and adds the equivalent dependencies to the package.json. Since @material-ui/styles was not being imported it was not added, so it crashes.

Preview: https://deploy-preview-27597--material-ui.netlify.app/components/tables/#data-table
Open the demo in CodeSandbox

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 01147a7

[eps1lon]

The DataGrid component depends on @material-ui/styles.

Direct dependency or peer dependency?

[m4theushw]

The DataGrid component depends on @material-ui/styles.

Direct dependency or peer dependency?

@eps1lon It's a transitive dependency.

[eps1lon]

It should either be a direct dependency or peer dependency. It sounds like DataGrid is importing @material-ui/styles, but not declaring it. That was already an issue when using /core v4 that is now more apparent.

When you say "transitive" then what package depends on it that you depend on? If you depend on a package that has a peer dependency on /styles then you need to either declare it as a dependency or hoist it by declaring it as a peerDependency

[m4theushw]

It should either be a direct dependency or peer dependency. It sounds like DataGrid is importing @material-ui/styles, but not declaring it. That was already an issue when using /core v4 that is now more apparent.

That's something we need to fix to support v5.

When you say "transitive" then what package depends on it that you depend on?

The @material-ui/data-grid depends on @material-ui/styles which is satisfied by using @material-ui/core v4.

If you depend on a package that has a peer dependency on /styles then you need to either declare it as a dependency or hoist it by declaring it as a peerDependency

Yeah, we gonna need to add @material-ui/styles as a peer dependency and check if its version and the core version match.

---

I changed this PR to not relay on the import-hack but to add @material-ui/styles as a dependency when opening the demo in CodeSandbox.

[oliviertassinari]

I suspect that for the next branch in the core repository, it won't be relevant long as we will likely drop core v4 support or simply degrade its support by depending on @mui/core-material v5 to use styled() with a peer dependence on emotion.
I think that it would help to cherry-pick this on master.

[eps1lon]

The @material-ui/data-grid depends on @material-ui/styles which is satisfied by using @material-ui/core v4.

You can't satisfy a dependency on B by declaring a dependency on A that depends on B. That was never supported and mostly worked incidentally.