使用NavLink嵌套Material UI ButtonGroup时样式丢失问题求助

问题原因 #

ButtonGroup组件通过直接选择子级Button元素应用样式（比如合并相邻按钮边框、统一布局），当在Button外层嵌套NavLink后，Button不再是ButtonGroup的直接子元素，ButtonGroup的样式规则无法生效，导致按钮布局和样式异常。

推荐解决方案：将NavLink作为Button的component属性 #

Material UI的Button支持通过component属性指定渲染的根元素，直接把NavLink传给这个属性，既保留ButtonGroup的样式，又实现路由跳转功能，无需额外嵌套：

import { Button, ButtonGroup } from '@mui/material';
import { NavLink } from 'react-router-dom';

export default function BasicButtonGroup() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <ButtonGroup color="primary" aria-label="outlined primary button group">
        <Button 
          component={NavLink} 
          to="/one/" 
          style={{ textDecoration: "none" }}
        >
          One
        </Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

备选方案：修复嵌套NavLink的样式（不推荐） #

如果必须保留嵌套结构，需要让NavLink的布局完全适配Button的尺寸，避免破坏ButtonGroup的样式规则：

import { Button, ButtonGroup, makeStyles } from '@mui/material';
import { NavLink } from 'react-router-dom';

const useStyles = makeStyles({
  navLinkWrapper: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    width: '100%',
    textDecoration: 'none',
  },
  buttonFullWidth: {
    width: '100%',
  },
});

export default function BasicButtonGroup() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <ButtonGroup color="primary" aria-label="outlined primary button group">
        <NavLink to="/one/" className={classes.navLinkWrapper}>
          <Button className={classes.buttonFullWidth}>One</Button>
        </NavLink>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

注意：第一种方案更符合Material UI的组件设计逻辑，能避免额外的样式维护成本，优先推荐使用。

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