具有多个按钮位置的 mui-datatables 自定义标题答案

【问题标题】：mui-datatables custom header with multiple buttons position具有多个按钮位置的 mui-datatables 自定义标题
【发布时间】：2021-10-24 10:01:27
【问题描述】：

在我的应用程序中，我正在使用 mui-datatables。我使用一个附加按钮向表格添加了一个自定义工具栏，该按钮与其他按钮一起添加到行中。但是当我添加第二个按钮时，它会添加到下面，尽管有足够的空间。如何在行中显示第二个按钮和其他按钮？

  const HeaderElements = () => (
    <>
      <AddNewButton />
      <ExportJsonButton />
    </>
  );

  <MUIDataTable
    title=""
    data={rows}
    columns={columns}
    options={{
      selectableRowsHeader: false,
      selectableRowsHideCheckboxes: true,
      customToolbar: () => (<HeaderElements />),
    }}
   />

【问题讨论】：

能否分享一个简单的代码沙箱代码示例？
有趣的是，在代码和框中它只使用普通按钮codesandbox.io/s/inspiring-haze-vvcm1?file=/src/App.js

标签： css reactjs material-ui mui-datatable

【解决方案1】：

我自己找到了解决方案：必须包装在一个按钮中：

<Button>
  <AddNewButton />
</Button>

【讨论】：