ButtonGroup variant outlined always has primary color borders on hover

[mattixittam]

• 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 😯

When a buttongroup button with variant outlined and a different color than primary set on the individual button is hovered over, the border is palette.primary.main instead of palette[color].x.

Expected Behavior 🤔

The color prop should also influence the border color on hover. This works when color is set on the ButtonGroup, but not when it is set on the individual buttons.

To be clear: my intent is to be able to set two different colors for the buttons in a buttongroup.

Possibly this is not an intended way of working (having different colors per button), but we have several buttons from our material-ui v4 codebase which worked fine but started misbehaving in v5.

Steps to Reproduce 🕹

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

Your Environment 🌎

`npx @mui/envinfo`

Browser: Chrome 95

No env info needed, codesandbox shows the bug.

[mnajdova]

Thanks for the report. Would be interesting to see if this can be solved as part of #28645 @ZeeshanTamboli FYI

[ZeeshanTamboli]

@mnajdova I think we can solve it separately. I looked into it. After inspecting in dev tools, I think the ButtonGroup hover styles has high specificity than Button if they are composed together.
https://github.com/mui-org/material-ui/blob/b6cdaaf1a7f60de9ed66a491b7477fad19429905/packages/mui-material/src/ButtonGroup/ButtonGroup.js#L153-L157

Button hovering border-color style individually without ButtonGroup works.

How can we make sure that child elements (Button) hover border-color style have high priority over parent (ButtonGroup)?

[mnajdova]

@ZeeshanTamboli if we are now providing the color via context, does the ButtonGroup even needs to set the borderColor? We can still set the borederRadius