[material-ui][ToggleButtonGroup] Support different elements under it

docs/data/material/components/toggle-button/CustomizedDividers.js

@@ -12,22 +12,24 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButtonGroup, {
+  toggleButtonGroupClasses,
+} from '@mui/material/ToggleButtonGroup';
 
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  '& .MuiToggleButtonGroup-grouped': {
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
     margin: theme.spacing(0.5),
     border: 0,
-    '&.Mui-disabled': {
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
       border: 0,
     },
-    '&:not(:first-of-type)': {
-      borderRadius: theme.shape.borderRadius,
-    },
-    '&:first-of-type': {
-      borderRadius: theme.shape.borderRadius,
-    },
   },
+  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]:
+    {
+      marginLeft: -1,
+      borderLeft: '1px solid transparent',
+    },
 }));
 
 export default function CustomizedDividers() {

docs/data/material/components/toggle-button/CustomizedDividers.tsx

@@ -12,22 +12,24 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButtonGroup, {
+  toggleButtonGroupClasses,
+} from '@mui/material/ToggleButtonGroup';
 
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  '& .MuiToggleButtonGroup-grouped': {
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
     margin: theme.spacing(0.5),
     border: 0,
-    '&.Mui-disabled': {
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
       border: 0,
     },
-    '&:not(:first-of-type)': {
-      borderRadius: theme.shape.borderRadius,
-    },
-    '&:first-of-type': {
-      borderRadius: theme.shape.borderRadius,
-    },
   },
+  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]:
+    {
+      marginLeft: -1,
+      borderLeft: '1px solid transparent',
+    },
 }));
 
 export default function CustomizedDividers() {

docs/pages/material-ui/api/toggle-button-group.json

@@ -51,6 +51,12 @@
       "description": "State class applied to the root element if `disabled={true}`.",
       "isGlobal": true
     },
+    {
+      "key": "firstButton",
+      "className": "MuiToggleButtonGroup-firstButton",
+      "description": "Styles applied to the first button in the toggle button group.",
+      "isGlobal": false
+    },
     {
       "key": "fullWidth",
       "className": "MuiToggleButtonGroup-fullWidth",
@@ -75,6 +81,18 @@
       "description": "Styles applied to the children if `orientation=\"vertical\"`.",
       "isGlobal": false
     },
+    {
+      "key": "lastButton",
+      "className": "MuiToggleButtonGroup-lastButton",
+      "description": "Styles applied to the last button in the toggle button group.",
+      "isGlobal": false
+    },
+    {
+      "key": "middleButton",
+      "className": "MuiToggleButtonGroup-middleButton",
+      "description": "Styles applied to buttons in the middle of the toggle button group.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiToggleButtonGroup-root",

docs/translations/api-docs/toggle-button-group/toggle-button-group.json

@@ -37,6 +37,10 @@
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
+    "firstButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the first button in the toggle button group"
+    },
     "fullWidth": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -53,6 +57,14 @@
       "nodeName": "the children",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
+    "lastButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last button in the toggle button group"
+    },
+    "middleButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "buttons in the middle of the toggle button group"
+    },
     "root": { "description": "Styles applied to the root element." },
     "vertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

packages/mui-material/src/ButtonGroup/ButtonGroupContext.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ButtonGroupProps } from './ButtonGroup';
 
-interface IButtonGroupContext {
+interface ButtonGroupContextType {
   className?: string;
   color?: ButtonGroupProps['color'];
   disabled?: boolean;
@@ -16,7 +16,7 @@ interface IButtonGroupContext {
 /**
  * @ignore - internal component.
  */
-const ButtonGroupContext = React.createContext<IButtonGroupContext>({});
+const ButtonGroupContext = React.createContext<ButtonGroupContextType>({});
 
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupContext.displayName = 'ButtonGroupContext';

packages/mui-material/src/ToggleButton/ToggleButton.js

@@ -3,13 +3,17 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '../styles';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
+import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
+import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
+import isValueSelected from '../ToggleButtonGroup/isValueSelected';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, fullWidth, selected, disabled, size, color } = ownerState;
@@ -108,7 +112,16 @@ const ToggleButtonRoot = styled(ButtonBase, {
 });
 
 const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiToggleButton' });
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const { value: contextValue, ...contextProps } = React.useContext(ToggleButtonGroupContext);
+  const toggleButtonGroupButtonContextPositionClassName = React.useContext(
+    ToggleButtonGroupButtonContext,
+  );
+  const resolvedProps = resolveProps(
+    { ...contextProps, selected: isValueSelected(inProps.value, contextValue) },
+    inProps,
+  );
+  const props = useThemeProps({ props: resolvedProps, name: 'MuiToggleButton' });
   const {
     children,
     className,
@@ -148,9 +161,11 @@ const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) {
     }
   };
 
+  const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
+
   return (
     <ToggleButtonRoot
-      className={clsx(classes.root, className)}
+      className={clsx(contextProps.className, classes.root, className, positionClassName)}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
       ref={ref}