AvatarGroup Spacing Doesn't Work with React Components
Open
@siriwatknp is already working on this.
Since Jan 23, 2023.
customization: css
scope: avatar
type: enhancement
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/clever-lake-4vjtt5?file=/src/App.js
Steps:
- Add AvatarGroup to your component and set the spacing property
- Create a custom component that returns an AvatarItem
- Place your custom component as a child to the AvatarGroup
Current behavior 😯
There is no spacing between the AvatarItems
Expected behavior 🤔
AvatarItems have spacing
Context 🔦
The spacing property only works if you add AvatarItem as children to AvatarGroup, but if you try to move the AvatarItem to a subcomponent the spacing won't get applied. Hopefully there's a simple fix with forwarding refs or something but not seeing anything in the documentation.
Your environment 🌎
(This is my development system, but see above code sandbox for the same issue on latest versions.)
System:
OS: macOS 12.6.1
Binaries:
Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
Yarn: Not Found
npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
Browsers:
Chrome: 109.0.5414.87
Edge: Not Found
Firefox: 103.0.1
Safari: 15.6.1
npmPackages:
@emotion/react: ^11.10.0 => 11.10.4
@emotion/styled: ^11.10.0 => 11.10.4
@mui/base: 5.0.0-alpha.100
@mui/core-downloads-tracker: 5.10.8
@mui/icons-material: ^5.10.2 => 5.10.6
@mui/lab: ^5.0.0-alpha.96 => 5.0.0-alpha.102
@mui/material: ^5.10.2 => 5.10.8
@mui/private-theming: 5.10.6
@mui/styled-engine: 5.10.8
@mui/styles: ^5.10.2 => 5.10.8
@mui/system: 5.10.8
@mui/types: 7.2.0
@mui/utils: 5.10.6
@mui/x-date-pickers: ^5.0.0-beta.6 => 5.0.4
@types/react: ^17.0.47 => 17.0.47
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.7.4 => 4.7.4
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.