你已经在问题中得到了答案。而不是使用JSX语法使用href和download属性声明a元素。创建a元素并以编程方式单击它：

function App() {
  const onDownload = () => {
    const link = document.createElement("a");
    link.download = `download.txt`;
    link.href = "./download.txt";
    link.click();
  };

  return (
    <Button onClick={onDownload} variant="contained" color="primary">
      Download
    </Button>
  );
}

现场演示

根据docs，我认为这将工作，并在使用nextjs的情况下，不要忘记将该文件放在公共文件夹中

<Button variant='contained' component="label">
    <a href="/files/CV.pdf" target="_blank" download>
         Download csv
    </a>
</Button>

您可以使用按钮的onClick事件处理程序来获取事件回调，并利用以下链接中的以下代码来下载文件。
https://codesource.io/how-to-download-file-in-javascript/

您还可以使用
文件保存程序
下载您的文件。
要安装它，请运行：
npm i file-saver
然后你可以通过以下方式从包中调用saveAs函数：

import React from "react";
import { saveAs } from "file-saver";

export default function App() {
  const saveFile = () => {
    saveAs(
      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      "example.pdf"
    );
  };
  return (
    <div>
      <button onClick={saveFile}>download</button>
    </div>
  );
}

第一个参数是要下载的URL，第二个参数是下载文件的文件名。

只需将download参数添加到Button元素中，如下例所示：

<div>
  <Button
    variant="contained"
    color="#ffa726"
    size="large"
    startIcon={<GetAppIcon />}
    download
  >
    Download Sample Method File
  </Button>
</div>

正确的材质UI方式是：

import {Button, Link} from '@mui/material'

<Button
    variant="contained"
    color="#ffa726"
    size="large"
    startIcon={<GetAppIcon />}
    component={Link}
    href="./abcf32x.pdf"
    download="How-to-download-file.pdf"
>
    Download Sample Method File
</Button>