更改下划线样式链接

Question

我想在悬停时更改下划线样式。更具体地说，我要尝试的是更改带下划线的链接的颜色和大小。

  const useStyles = makeStyles(theme => ({
    button: {
    marginLeft: theme.spacing(2),
   },
  }));

 <MaterialLink
    component="button"
    aria-owns={anchorEl ? 'mouse-over-popover' : undefined}
    onMouseEnter={handlePopperOpen}
    onClick={handlePopperOpen}
    color="inherit"
 >
      <Typography variant="subtitle1" color="inherit" >Buisness Services</Typography>
 </MaterialLink>

有人可以指导我如何在悬停时自定义下划线吗？

示例：

Answer 1

这就是我想要的：

 const theme = createMuiTheme({
    overrides: {
        MuiLink: {
            button: {
                "&:hover": {
                    borderBottom: '2px solid #3F51B5'
                }
            },
        }
    }
});