[Masonry] `spacing` doesn't accept hard-coded string value

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I tried to add spacing={'24px'} to the Masonry component but it broke the Masonry layout as seen in the image below.

If I used spacing={3} as the replacement of spacing={'24px'} for the Masonry component, the Masonry layout was fine as seen in the image below.

I always use spacing={'24px'} to the Grid component and it works as seen in the image below.

Expected behavior 🤔

The Masonry component should accept a string value for the spacing prop as stated in the Masonry API documentation here https://mui.com/api/masonry/

Steps to reproduce 🕹

Steps:

1. Import the Masonry component
2. Add spacing={'24px'} prop to the Masonry component
3. The Masonry layout is broken

Context 🔦

Here is the demo: https://codesandbox.io/s/github-mui-masonry-xnlub

For me, this case is not really important since I could replace spacing={'24px'} with spacing={3}. But it could be important if someone wants to use custom spacing like 5px, 10px, etc.

Your environment 🌎

Environment

Dependencies: stated in the demo Browser: Chrome 97 OS: Windows 11

[siriwatknp]

In my opinion, keeping the default unit to theme spacing and encouraging developers to customise theme is more healthy for several reasons

I agree that the spacing should not be hard-coded and should follow the theme spacing definition. If we have to provide an escape hatch, we should document the why and example use case.

[hbjORbj]

Hi, thanks for opening the issue.

As you can see in Masonry API doc, spacing is a factor of the theme's spacing.

But it could be important if someone wants to use custom spacing like 5px, 10px, etc.

MUI users can customise the value of theme spacing flexibly (as described in https://mui.com/customization/spacing/).

If we allow to accept hard-coded string or number, then we have to drop supporting theme spacing as the default unit of spacing prop. In my opinion, keeping the default unit to theme spacing and encouraging developers to customise theme is more healthy for several reasons. One of them is that MUI users who have not had an opportunity to customise theme are forced to try it, and this can benefit them over the long-run during the time they use any of MUI components.

@jaballogian What do you think?

cc @siriwatknp @michaldudak