Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How/Why does the props affects the style on `ButtonGroup` and `IconButton`

See original GitHub issue

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

Current Behavior 😯

With MUI@5.0.2, styling for the border is using :not(:last-of-type) in the selector. This implies that MUI is using class on and <button/>, which causs "href property of Button in a ButtonGroup " and “IconButton in ButtonGroup has unstable style”.

Is this is a bug?

I found several incoherent behaviors working with ButtonGroup and IconButton:

Property href changes the right border of element. (answer this on Stack Overflow 69488393)
Modularizing IconButton changes color of element. (answered on Stack Overflow 69485887)
Passing empty props changes color of element. (answered on Stack Overflow 69485887)
Button in ButtonGroup href property changes right border.(answer this on Stack Overflow 69488393)
When all IconButton-s are on one side, the hover background of last IconButton will change.(answer this on Stack Overflow 69488977)
IconButton (both MUI original and customized) in ButtonGroup will cause two Error/Warning-s:(answer this on Stack Overflow #####)

I hosted a minimal environment with GitHub Pages .

Expected Behavior 🤔

The ButtonGroup HOC converts IconButton just like how it converts Button.

Steps to Reproduce 🕹

To check behavior: I hosted a minimal environment with GitHub Pages .
To play with the source code Fork the source code and yarn start (or npm start)

Context 🔦

I asked a question on Stack Overflow I added this to my MUI learning note

Your Environment 🌎

`npx @mui/envinfo`

System: OS: Windows 10 10.0.19042 = 20H2 Binaries: Node: 14.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 92.0.4515.159 Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38) npmPackages: @emotion/react: ^11.4.1 => 11.4.1 @emotion/styled: ^11.3.0 => 11.3.0 @mui/core: 5.0.0-alpha.49 @mui/icons-material: ^5.0.1 => 5.0.1 @mui/material: ^5.0.2 => 5.0.2 @mui/private-theming: 5.0.1 @mui/styled-engine: 5.0.1 @mui/system: 5.0.2 @mui/types: 7.0.0 @mui/utils: 5.0.1 @types/react: ^17.0.0 => 17.0.27 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.1.2 => 4.4.3 ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```