如何让带链接的MUI Button样式与普通Button保持一致？

一、通过修改Link组件实现样式统一 #

完全可以通过定制Link组件来让它的hover样式和普通Button保持一致，且能跟随主题变更自动适配。具体有两种实现方式：

1. 用styled定制Link组件 #

import { styled } from '@mui/material/styles';
import Link from '@mui/material/Link';

// 定制继承Button hover样式的Link
const ButtonLink = styled(Link)(({ theme }) => ({
  '&:hover': {
    color: theme.palette.primary.contrastText, // 取Button的hover文字颜色
    textDecoration: 'none', // 移除Link默认的hover下划线，和Button保持一致
  },
}));

// 在Button中使用定制后的Link
<Button
  color='primary'
  href={`/apiproxy/objects/${id}/subobjects`}
  LinkComponent={React.forwardRef((props, ref) => (
    <ButtonLink 
      {...props} 
      type='text/csv' 
      download={`object_${id}_subobjects.csv`} 
      ref={ref} 
    />
  ))}
>
  下载CSV
</Button>

2. 直接通过sx属性覆盖Link样式 #

如果不想额外创建组件，也可以直接在Link的sx属性中指定hover样式：

<Button
  color='primary'
  href={`/apiproxy/objects/${id}/subobjects`}
  LinkComponent={React.forwardRef((props, ref) => (
    <Link 
      {...props} 
      type='text/csv' 
      download={`object_${id}_subobjects.csv`} 
      ref={ref}
      sx={(theme) => ({
        '&:hover': {
          color: theme.palette.primary.contrastText,
          textDecoration: 'none',
        },
      })}
    />
  ))}
>
  下载CSV
</Button>

二、Button hover时的文字颜色对应主题属性 #

如果不想修改Link组件，直接用主题属性来指定颜色的话，color='primary'的普通Button（contained模式，默认）hover时的文字颜色，对应的是主题调色板中的palette.primary.contrastText。这个属性会随主题自动切换，比如浅色主题下是白色，深色主题下会调整为符合对比度的颜色，不会出现主题变更后样式失效的问题。

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