ButtonGroup styling breaks when Button components differ in v5

[trevorr]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Buttons have rounded interior corners if the component property is changed (e.g. to "a" or {Link}) on one of the buttons. (It works if all buttons have the same component property value.)

Expected Behavior 🤔

Interior corners of buttons in a group should not be rounded, regardless of component. This was the behavior in v4.

Steps to Reproduce 🕹

https://codesandbox.io/s/mui-buttongroup-component-bug-hif45?file=/src/Demo.tsx

Context 🔦

After upgrading from v4 to v5, Buttons in a ButtonGroup with differing component properties show rounded interior corners. This seems to be because the CSS selector was changed from :last-child (.MuiButtonGroup-groupedHorizontal:not(:last-child)) to :last-of-type (.MuiButtonGroup-grouped:not(:last-of-type)).

Your Environment 🌎

`npx @mui/envinfo`

``` System: OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa) Binaries: Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node Yarn: 1.22.17 - ~/project/node_modules/.bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.5.0 => 11.5.0 @emotion/styled: ^11.3.0 => 11.3.0 @mui/core: 5.0.0-alpha.51 @mui/icons-material: ^5.0.4 => 5.0.4 @mui/lab: ^5.0.0-alpha.51 => 5.0.0-alpha.51 @mui/material: ^5.0.4 => 5.0.4 @mui/private-theming: 5.0.1 @mui/styled-engine: 5.0.1 @mui/styles: ^5.0.1 => 5.0.1 @mui/system: 5.0.4 @mui/types: 7.0.0 @mui/utils: 5.0.1 @types/react: ^17.0.31 => 17.0.31 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.4.4 => 4.4.4 ``` Chrome Version 94.0.4606.81 (Official Build) (64-bit)

[reckter]

Context 🔦

After upgrading from v4 to v5, Buttons in a ButtonGroup with differing component properties show rounded interior corners. This seems to be because the CSS selector was changed from :last-child (.MuiButtonGroup-groupedHorizontal:not(:last-child)) to :last-of-type (.MuiButtonGroup-grouped:not(:last-of-type)).

Does this have a reason, or could it "simply" be reverted for a fix?

[komik966]

reverting to :last-child will cause this warning: https://stackoverflow.com/questions/57239807/the-pseudo-class-first-child-is-potentially-unsafe-when-doing-server-side-ren

[Lugribossk]

This also happens for Buttons with component="label", which makes it impossible to place buttons that trigger file inputs inside a button group. E.g:

<ButtonGroup>
  <Button component="label">
    <span>Upload file</span>
    <input type="file" hidden/>
  </Button>
  <Button>Do other stuff</Button>
</ButtonGroup>

[ZeeshanTamboli]

Closing this issue. It has been resolved in Material UI version 5.14.9, with the fix done in #38520. You can check it out here: https://codesandbox.io/s/mui-buttongroup-component-bug-forked-j9fvy3.