group button styles are not quite correct.

[cyphernull]

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

Expected Behavior 🤔

the button background should not cover the separator between the buttons.

Steps to Reproduce 🕹

Steps:

material-ui doc

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
React	--
Browser	--
TypeScript	--
etc.

[alecananian]

The hover background color and border color are the same, that's what you're seeing in the second row of your screenshot. The third row looks different because the "TWO" button has a box shadow to its left on hover, which is darkening the left border.

Example with the hover box shadow disabled:

[oliviertassinari]

@alecananian Great catch are you suggesting this diff?

diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js
index e93ec47d7..9e40af65d 100644
--- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js
+++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js
@@ -126,6 +126,9 @@ export const styles = (theme) => ({
   /* Styles applied to the children if `variant="contained"`. */
   groupedContained: {
     boxShadow: 'none',
+    '&:hover': {
+      boxShadow: 'none',
+    },
   },
   /* Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
   groupedContainedHorizontal: {

[alecananian]

I wasn't sure what the expected design was, since the same could be achieved with the disableElevation prop, but I do see that's a little different. The ButtonGroup wrapper already has a box shadow applied to it, so the extra shadow on hover appears to be a bug.