[Grid] Fix horizontal scrollbar and nested dimensions

[greguintow]

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

Fixes #7466

This PR is to be a way to implement what #24299 does without creating a new prop.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 10a83b8

[oliviertassinari]

I have polished it, looks good otherwise

[oliviertassinari]

@greguintow I have reverted the width nested handline. It's not something we can fix in the current configuration. Notice the explosion of the CSS generated:

HEAD

PR

One step at a time. We first need to migrate the Grid to emotion, then we should be able to apply the logic back and remove the !important by increasing specificity. This solves the concern of @eps1lon as we do no longer need the !important style.

[greguintow]

@greguintow I have reverted the width nested handline. It's not something we can fix in the current configuration. Notice the explosion of the CSS generated:

It's showing 714 grid classes found but you have to consider this part of the code.

return {
  ...obj,
  [`&$container$item$spacing-xs-${spacing}`]: {
    flexBasis: fullWidth,
    maxWidth: fullWidth,
  },
};

This part shows that each breakpoint size will have this, but in that line have 3 .Mui-Grid, because will be .MuiGrid-container.MuiGrid-item.MuiGrid-spacing-xs-y. So the real amount of Mui-Grid would be 238 if we divide it by 3.

[oliviertassinari]

@greguintow True, the only issue is that I already account for this in the search (notice all the whitespace prefixing the query). I would have found 2.5k matches if I didn't (x3) 😁

[greguintow]

@greguintow True, the only issue is that I already account for this in the search (notice all the whitespace prefixing the query). I would have found 2.5k matches if I didn't (x3) 😁

LOOL, okay

[oliviertassinari]

@greguintow But it's OK. We can work on the migration to emotion then applying the same solution. The size of the generated CSS should no longer be a concern.

[greguintow]

@greguintow But it's OK. We can work on the migration to emotion then applying the same solution. The size of the generated CSS should no longer be a concern.

@oliviertassinari Alright sounds good! Does the migration to emotion change the component style in some way? Because I'm having to use version 5.0.0-alpha.20, because the Button migration made my app change completely, I think I should create an issue about it.

[oliviertassinari]

Alright sounds good! Does the migration to emotion change the component style in some way? Because I'm having to use version 5.0.0-alpha.20, because the Button migration made my app change completely, I think I should create an issue about it.

You can find 10 duplicate issues about this in the issue tracker. There is a documented workaround only necessary during the phase were we have both jss and the new styled API.

[oliviertassinari]

I'm rebasing on top of #24395

[oliviertassinari]

@greguintow Thanks for sharing the solution and spending time on it :)