search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.66k stars 32.22k forks source link

[material-ui][Grid2] Child Grids in custom component are not aligned on the same row as expected #44037

Open Tasin5541 opened 1 week ago

Tasin5541 commented 1 week ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-2x2v7n?file=Demo.tsx

Steps:

  1. Notice that the two buttons in the FormButton component are displayed on separate rows even though each has size={6} defined.
  2. The same buttons are displayed on the same row if Grid is used directly instead of Custom Component.

Current behavior

The buttons are rendered on separate rows when using the FormButton component, even though they should be on the same row.

Expected behavior

The two buttons, "Search" and "Reset", should be displayed side by side in the same row, similar to the second Grid example where the button code is directly in the JSX.

Context

We recently upgraded our project from MUI v5 to v6. Our application layouts heavily depend on Grid. We tried replacing the deprecated version with Grid2 and ran into this issue.

Your environment

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.12.2 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 129.0.6668.90 Edge: Chromium (129.0.2792.52) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.2 @mui/icons-material: ^6.1.2 => 6.1.2 @mui/material: ^6.1.2 => 6.1.2 @mui/private-theming: 6.1.2 @mui/styled-engine: 6.1.2 @mui/system: 6.1.2 @mui/types: 7.2.17 @mui/utils: 6.1.2 @types/react: ^18.3.11 => 18.3.11 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.2.2 => 5.5.3 ```

Search keywords: Grid, Grid2, Grids in custom component

DiegoAndai commented 1 week ago

Hey @Tasin5541! Thanks for the report. This should've been fixed with https://github.com/mui/material-ui/pull/43733, which has just been released in 6.1.3. Could you try it with that version? 😊

Here's the updated example: https://codesandbox.io/p/sandbox/issue-44037-updated-n47gsw?file=%2Fsrc%2FApp.tsx

Tasin5541 commented 1 week ago

Hey @Tasin5541! Thanks for the report. This should've been fixed with #43733, which has just been released in 6.1.3. Could you try it with that version? 😊

Here's the updated example: https://codesandbox.io/p/sandbox/issue-44037-updated-n47gsw?file=%2Fsrc%2FApp.tsx

The issue with the custom component is fixed. However, we have found another issue where textfield and labels are not taking proper space (works fine with the deprecated Grid). https://stackblitz.com/edit/react-rgn3zf?file=Demo.tsx Let me know if I need to create a new bug for this. I thought this issue would get fixed automatically if the reported issue got fixed.