[joy-ui][ButtonGroup] Broken styles with custom button elements

[phillip-winder]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

https://codesandbox.io/s/affectionate-wiles-xzrrzp?file=/Demo.tsx

1. Create custom Button:

const A = () => {
  return <Button>hi</Button>;
};

2. Use Button in ButtonGroup

<ButtonGroup>
  <A />
  <A />
</ButtonGroup>

Current behavior 😯

The borders of the ButtonGroup are not rounded.

Expected behavior 🤔

The borders of the ButtonGroup should be rounded.

Context 🔦

No response

Your environment 🌎

@mui/joy 5.0.0-beta.9

[vineetjk]

@PhillipWinder you are correct, And one more thing I observed -> if <ButtonGroup> has only one child then the style is correct.

[vineetjk]

if this issue is ready to take, can I work on this?

[danilo-leal]

@vineetjk go for it! 🙌

[vineetjk]

sure @danilo-leal, I will work on this

[vineetjk]

Hi @brijeshb42 , I am able to run the docs locally in my machine. But I am facing a problem while reproducing the bug in playground.
PFA ->

Kindly guide me if I am in wrong direction.

Thanks

[vineetjk]

Hi @brijeshb42 , I am able to run the docs locally in my machine. But I am facing a problem while reproducing the bug in playground. PFA ->

Kindly guide me if I am in wrong direction.

Thanks

This problem solved by wrapping playground page with CssVarsProvider

import { CssVarsProvider } from '@mui/joy/styles';

 <CssVarsProvider>
   …
 </CssVarsProvider>

[vineetjk]

I have found the cause for this bug.. 'data-first-child' and 'data-last-child' props are not applied to the buttons which are returned by function or wrapped in <> ...</>