An example of using a custom theme to style a MUI ToggleButton

ToggleButton.tsx

import * as React from 'react';
import {
  ToggleButton as MuiToggleButton,
  styled,
} from '@mui/material';
import type { ToggleButtonProps } from '@mui/material';
import { border, margin, padding } from 'polished';
import { typography as labelTypography } from '../Typography/Labels/constants';
import { FontWeight } from '../constants';

const StyledToggleButton = styled(MuiToggleButton)<ToggleButtonProps>(({ size, theme }) => ({
  '&.Mui-selected': {
    '&:hover': {
      backgroundColor: theme.colors['brand-primary-125'],
    },
    backgroundColor: theme.colors['brand-primary'],
    color: theme.colors['neutral-0'],
  },
  '&:hover': {
    backgroundColor: theme.colors['neutral-25'],
  },
  textTransform: 'none',
  ...(size === 'small'
    ? padding(theme.sizing['xxx-small'], theme.sizing['xx-small'])
    : padding(theme.sizing['x-small'])),
  ...margin('0px'),
  ...labelTypography.LabelMedium,
  color: theme.colors['neutral-75'],
  fontWeight: FontWeight.Bold,
  ...border('top', '1px', 'solid', theme.colors['neutral-100']),
  ...border('bottom', '1px', 'solid', theme.colors['neutral-100']),
}));

export const ToggleButton = (props: ToggleButtonProps) => <StyledToggleButton {...props} />;