Material-ui: [Badge] styling the children

[ashkank83]

Badge is styling the layout of its children. So for example if you have a card and you add a Badge to it the width of the card will be modified.
@material-ui/core version 3.1.2

Please see the example where the same card is being rendered differently when Badge is added:
Sample

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.2 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[eps1lon]

The issue is caused by https://github.com/mui-org/material-ui/blob/0cf866a898a0aeacc20cc0f119b80395e115826d/packages/material-ui/src/Badge/Badge.js#L13

I guess there was a reason to use inline-flex but getting the Badge to work without that line would solve your problem.

[ashkank83]

@eps1lon Thanks for the reply. Is this considered a bug? and will it be fixed in future releases?
And also if I want to fix this manually for now, would you suggest to override the root class for Badge? If not would you kindly change the code sandbox for me with your recommended way to fix this? Thanks

[eps1lon]

I think nobody intended Badges to be applied to full width components since it would overflow outside the viewport.

You can workaround the current issue with the following workaround and see if you can come up with a solution for the overflow. But I'm hesitant to change from inline-flex since I don't know why this implementation was chosen.
https://codesandbox.io/s/9l8nk0y0vy

[ashkank83]

Thank you very much for the code sample and also all the hard work. Thanks