reactjs - 如何更改材料表操作字段图标

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 组件作为iconprop 的值来更改操作的图标。

图标 字符串或 () => ReactElement - 来自材质图标或自定义组件的按钮图标

因此，代替editor 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
            },
          },
        ]}
     />

Answer 3

就我而言，我导入了图标

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

并像这样简单地通过它

actions = {
  [{
    icon: VisibilityIcon,
    tooltip: 'View'
    onClick: (event, rowData) => {
         // Your required onclick functionality
    }
  }]
}

希望这会有所帮助...祝您有美好的一天