React的NavLink没有将活动类应用于TypeScript中的Button

Question

我已经使用create-react-app的打字稿模板和Material-UI创建了一个新应用，并且一直在将一些JavaScript代码从模板项目移植到打字稿中。

我有一个NavBar组件，它会生成NavItem个孩子，并在渲染时包括这些孩子。

// imports...

const styles = (theme: Theme) => createStyles({/* stuff */});

const useStyles = makeStyles(styles);

interface NavItemProps {
  title: string;
  href: string;
  depth: number;
}

const NavItem: React.FC<NavItemProps> = (props: NavItemProps) => {
  const classes = useStyles();

  // other stuff

  return (
    <ListItem className={classes.itemLeaf} disableGutters key={key}>
      <Button
        activeClassName={classes.active}
        className={classNames(classes.buttonLeaf, `depth-${props.depth}`)}
        component={NavLink}
        exact
        style={style}
        to={props.href}
      >
        {props.title}
      </Button>
    </ListItem>
  );
};

export default NavItem;

我在导航栏上遇到一个问题，似乎React的NavLink没有将活动类应用于导航Button。

生成的DOM元素几乎与JS模板中的DOM元素相同，并且Chrome中的React Dev Tools显示了相同的组件树，但是我可以看到Router.Consumer（似乎来自{{1 }}）不会将NavLink应用于其子项，而在JS模板项目中则适用。

下面的组件树反应-JS模板项目（左），我的TS项目（右）：

很多文章建议使用activeClassName来包装我的组件，但这似乎无法解决问题。

withRouter()是否有替代方法可能会更好地解决此问题？