反应：运行应用程序构建后如何在mui-datatable中保留操作图标列

问题描述

在我的React应用中，我在表中使用 mui-datatable 。我创建了一个名为Actions的新列，其中包含 Material-UI Edit and Delete 图标。

当我在开发模式下运行该应用程序时，图标显示良好。当我部署应用程序时出现问题，即使用build中的npm run build react文件，我部署的 edit 和 delete 图标消失了网络应用。我的方法行不通。

Mui数据表

const InvoiceTable = (props) => {

  const classes = useStyles();

  const columns = [
    { name: "invoiceNo",label: "Invoice No" },{ name: "product",label: "Product" },{
      name: "Actions",<====== New column
      options: {
        customBodyRender: (value,tableMeta,updateValue) => {
          // const i = tableMeta.rowIndex;
          // const data = this.state.employeesDetail;
          return (
            // OPEN MODAL
            <div>
              <Tooltip title="Edit">
                <EditIcon                           <====== EDIT ICON
                  color="action"
                  onClick={() => alert("Under Construction")}
                />
              </Tooltip>
              
                <Tooltip title="Delete">            <====== DELETE ICON
                  <DeleteOutlineIcon
                    style={deleteIcon}
                    color="action"
                    onClick={() => alert("Under Construction")}
                  />
                </Tooltip>
              
            </div>
          );
        },},];
  return (
    <div className={classes.root}>
            <MUIDataTable
              title={
                <Fragment>
                  Purchase Invoice
                  <Tooltip title="Add">
                    <AddBoxIcon
                      color="action"
                      style={addIcon}
                      onClick={() => dispatch(toggleModal())}
                    />
    </div>
  );

...

export default InvoiceTable;

const options = {
  filterType: "checkBox",rowsPerPage: 5,rowsPerPageOptions: [5,10,15,20],downloadOptions: { filename: "InvoiceData.csv",separator: "," },elevation: 6,selectableRows: false,};

部署前后的图像

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）