如何使带有链接的按钮看起来像普通按钮？

Question

我有一个按钮可以下载带有文件名的文件。为此，我写了这个：

<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} />)}
/>

生成的按钮看起来与其他没有 href 属性的按钮相同（也带有

color='primary'

），但悬停时其文本颜色变为蓝色，与其他按钮不同，它保持白色。 如何使其样式与其他按钮相同？我可以将

&:hover

文本颜色指定为白色，但是当主题更改其他按钮的文本颜色时，这会中断。

有没有办法更改链接组件，使其样式与其他按钮相同，或者如果没有，按钮在调色板中使用什么作为悬停文本颜色，以便我可以将其设置为该颜色？

Answer 1

我认为你可以在 Link 组件中使用

sx

属性。就像下面...

<Button
  color="primary"
  href="/apiproxy/objects/1/subobjects"
  LinkComponent={React.forwardRef((props, ref) => (
    <Link
      {...props}
      type="text/csv"
      download={"object_1_subobjects.csv"}
      ref={ref}
      sx={{
        "&:hover": {
          color: "white",
        },
      }}
    />
  ))}
/>