如何更改材料表操作字段图标答案

【问题标题】：how to change material table action fields icon如何更改材料表操作字段图标
【发布时间】：2020-02-04 14:47:23
【问题描述】：

        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)
          }
        ]}

【问题讨论】：

考虑添加上下文和描述并正确格式化您的问题。

标签： reactjs material-table

【解决方案1】：

在我的例子中，我导入了图标

import VisibilityIcon from '@material-ui/icons/Visibility';

然后像这样简单地传递它

actions = {
  [{
    icon: VisibilityIcon,
    tooltip: 'View',
    onClick: (event, rowData) => {
      setAction('View');
      openInPopup(rowData.customerid);
    }
  }]
}

希望这会有所帮助……祝你有美好的一天

【讨论】：

【解决方案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
            },
          },
        ]}
     />

【讨论】：

【解决方案3】：

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

icon string or () => ReactElement - 来自材质图标的按钮图标或自定义组件

因此，不要添加edit 或delete，而是添加所需图标的组件。比如：

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

// ...

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

// ...

【讨论】：

怎么做？请给我一个例子
它应该是这样的图标：() => 否则会出错
谢谢，基本上是一个错字。