React中Material-UI Toggle Button自定义样式实现问题

当前实现 #

• 通过styled-components定义StyledToggleButtonGroup，覆盖Material-UI ToggleButtonGroup的默认样式，针对.MuiToggleButtonGroup-grouped类自定义单个切换按钮的外观
• 编写toggleBtnStyles函数，根据alignment状态为按钮条件应用颜色和背景样式

期望样式 #

实现自定义切换按钮外观：选中状态的按钮底部带有向下的三角形箭头，未选中按钮无箭头；未选中时按钮为深色背景+白色文字，选中时反转配色。

当前效果 #

按钮为常规矩形切换样式，仅能切换背景色和文字色，无底部箭头，与预期样式不符。

已尝试操作 #

调整StyledToggleButtonGroup和toggleBtnStyles中的样式参数，未实现底部箭头效果。

代码 #

const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
'& .MuiToggleButtonGroup-grouped': {
  margin: theme.spacing(0.5),
  color: '#FFF',
  backgroundColor: '#000',
  '&.Mui-selected': {
    color: '#000',
    backgroundColor: '#FFF',
  },
  '&.Mui-disabled': {
    border: 0,
  },
  '&:not(:first-of-type)': {
    borderRadius: theme.shape.borderRadius,
    borderLeft: '#000',
  },
  '&:first-of-type': {
    borderRadius: theme.shape.borderRadius,
  },
  '& span': {
    textTransform: 'none',
  },
},
marginBottom: '20px',
}))
const toggleBtnStyles = (alignment: any) => ({
toggleBtn: {
  marginRight: '10px',
  color: alignment === 'personalBusiness' ? '#FFF' : '#000',
  backgroundColor: alignment === 'personalBusiness' ? '#606060' : '#FFF',
},
commercialToggleBtn: {
  color: alignment === 'commercial' ? '#FFF' : '#000',
  backgroundColor: alignment === 'commercial' ? '#606060' : '#FFF',
},
})

<StyledToggleButtonGroup
  size='small'
  value={alignment}
  exclusive
  onChange={handleAlignment}
  aria-label='text alignment'>
  <ToggleButton
    value='Business'
    aria-label='Business'
    style={toggleBtnStyles(alignment).toggleBtn}>
    <span>Business</span>
  </ToggleButton>
  <ToggleButton
    value='commercial'
    aria-label='commercial'
    style={toggleBtnStyles(alignment).commercialToggleBtn}>
    <span>Commercial</span>
  </ToggleButton>
</StyledToggleButtonGroup>

解决方案 #

要实现底部箭头，需通过CSS伪元素绘制三角形，并结合选中状态控制显示。以下是修改后的代码：

1. 重构Styled组件

import styled from 'styled-components';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
  marginBottom: '20px',
  '& .MuiToggleButtonGroup-grouped': {
    margin: theme.spacing(0.5),
    color: '#FFF',
    backgroundColor: '#606060',
    position: 'relative',
    border: 'none',
    borderRadius: theme.shape.borderRadius,
    paddingBottom: theme.spacing(1.5), // 给箭头留出空间
    '& span': {
      textTransform: 'none',
    },
    // 选中状态样式
    '&.Mui-selected': {
      color: '#000',
      backgroundColor: '#FFF',
      // 绘制底部箭头
      '&::after': {
        content: '""',
        position: 'absolute',
        bottom: '-6px',
        left: '50%',
        transform: 'translateX(-50%)',
        width: 0,
        height: 0,
        borderLeft: '8px solid transparent',
        borderRight: '8px solid transparent',
        borderTop: '8px solid #FFF',
      },
    },
    '&.Mui-disabled': {
      border: 0,
    },
    '&:not(:first-of-type)': {
      borderLeft: 'none',
    },
  },
}));

2. 简化组件使用

移除冗余的内联样式函数，样式统一由Styled组件管理：

<StyledToggleButtonGroup
  size='small'
  value={alignment}
  exclusive
  onChange={handleAlignment}
  aria-label='text alignment'>
  <ToggleButton value='Business' aria-label='Business'>
    <span>Business</span>
  </ToggleButton>
  <ToggleButton value='commercial' aria-label='commercial'>
    <span>Commercial</span>
  </ToggleButton>
</StyledToggleButtonGroup>

关键说明 #

• 用CSS伪元素::after绘制三角形箭头，通过绝对定位固定在按钮底部居中位置
• 仅在.Mui-selected选中状态下显示箭头，确保样式逻辑正确
• 统一样式到Styled组件中，避免内联样式与全局样式冲突
• 调整按钮内边距，避免箭头遮挡按钮内容

内容的提问来源于stack exchange，提问作者jake clark