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

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

我认为您可以使用

styledComponent

作为链接组件。就像下面...

const theme = useTheme();

const StyledLink = styled(Link)(({ theme, color = "primary" }) => ({
  ":hover": {
    color: theme.palette.secondary.main,
  },
}));

<Button
  color="primary"
  href="/apiproxy/objects/1/subobjects"
  LinkComponent={React.forwardRef((props, ref) => (
    <StyledLink
      {...props}
      type="text/csv"
      download={"object_1_subobjects.csv"}
      ref={ref}
      theme={theme}
    />
  ))}
/>

您可以在 theme.js 文件中的调色板中设置悬停颜色，并使用该颜色，如

theme.palette.${hoverColor}

请检查此测试组件。 https://codesandbox.io/p/sandbox/mui-28251-28335-forked-j2x8cd?file=%2Fsrc%2FApp.js

Answer 2

也许您可以让按钮将它们重定向到可以下载文件的 MediaFire：

<a href="link-to-media"><button class="buttonClass">Download</button></a>

然后你可以将buttonClass修改为你喜欢的任何内容。