[ButtonGroup] Fix style to use last-child

[zoy-l]

last-of-type or first-of-type will look up different elements as two queues, so the style will be invalidated when customizing the button component

I looked at the information emotion-js/emotion#1178 (comment) emotion-js/emotion#1105 last-child should be safe

I'm not sure if accept situation, if sure, please let me know if I need to add a test case Thanks! 🤔

demo: https://codesandbox.io/s/suspicious-mopsa-o1bqtu?file=/index.html

• Fixes [ButtonGroup] Breaking when adding href to Button #31210 and ButtonGroup styling breaks when Button components differ in v5 #29224

• I have followed (at least) the PR section of the contributing guide.

[zoy-l]

#31210,#29224

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against c040112

[zoy-l]

I checked the ci, and I don't quite understand why this fails, it seems that it has nothing to do with my modification 😅

[mnajdova]

Can we add regression tests for the examples that fails, for example using ButtonGroup component. You can check some of the tests already added in https://github.com/mui/material-ui/tree/master/test/regressions/fixtures

[michaldudak]

IMO the better way to go here would be to implement the change mentioned in #29514. This way, each element of the group will be aware of the position it has and will be able to be styled appropriately.