Question

        actions={[
          {
            icon: 'edit',
            tooltip: 'Edit User',
            onClick: (event, rowData) => alert('You are editing ' + rowData.name)
          },
          {
            icon: 'delete',
            tooltip: 'Delete User',
            onClick: (event, rowData) => confirm('You want to delete ' + rowData.name)
          }
        ]}

Answer 1

您可以通过提供任意React组件作为icon prop的值来更改动作图标。

图标 字符串或（）=> ReactElement -材质图标中的按钮图标或自定义组件

因此，代替edit或delete，添加所需图标的组件。像这样：

import { Edit } from '@material-ui/icons'

// ...

{
  icon: <Edit />,
  tooltip: 'Edit User',
  onClick: (event, rowData) => alert('You are editing ' + rowData.name)
},

// ...

Answer 2

简单的示例代码如下：

<MaterialTable
  // other props
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => {
        // Do save operation
      }
    }
  ]}
/>

如果你使用像 FontawesomeIcon 这样的东西，这个示例很好：

    <MaterialTable
      // other props 
      actions={[
          {
            icon: () => <FontAwesomeIcon icon={faSave} />,
            tooltip: 'Save User',
            onClick: (event, rowData) => {
              // Do save operation
            },
          },
        ]}
     />

如何更改物料表操作字段图标

2 个答案: