REACTJs：如何改变Material-Table中编辑删除图标的颜色和大小？

Question

我在我的项目中使用 Material-Table，我想更改编辑和删除图标的颜色和大小。 如何实现？ 我附上这个问题的截图。

function Editable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
 
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
  ]);

  return (
    <MaterialTable
      title="Editable Preview"
      columns={columns}
      data={data}
      editable={{
        //Code of add, update
      }}
    />
  )
}

Answer 1

您可以使用actions道具创建自己的样式，然后根据需要设置样式

actions={[
             {
               icon: () => (
                 <Edit fontSize="large"
                   className={classes.edit}
                 />
               ),
               tooltip: 'Edit Item',
               onClick: (event, rowData) => edit(rowData)
             },
             {
               icon: () => (
                 <Delete fontSize="large"
                   className={classes.delete}
                 />
               ),
               tooltip: 'Delete Item',
               onClick: (event, rowData) => delete(rowData),
             },
           ]}

Answer 2

使用tableIcons 。

const tableIcons = {<br/>
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} style={{fontSize: 18}}/>),<br/>
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} style={{fontSize: 18}}/>),<br/>
  };<br/>
<br/>

<MaterialTable icons={tableIcons} ... />

Answer 3

Material-table允许您覆盖任何列的呈现，您可以直接在列中指定操作项，并进一步调用您需要的任何和所有onClick事件。

 const columns = [
        {
          render: rowData => (
            <>
              <IconButton>
                <EditIcon style={{ color: 'green' }} />
              </IconButton>
              <IconButton>
                <DeleteIcon style={{ color: 'yellow' }} />
              </IconButton>
            </>
          ),
          sorting: false,
        },
      ];