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.