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

Posted 2023-02-22

【中文标题】REACTJs：如何更改 Material-Table 中编辑和删除图标的颜色和大小？

【英文标题】：REACTJs: How to change color and size of edit and delete icon in Material-Table?

【发布时间】：2021-02-08 20:05:41

【问题描述】：

我在我的项目中使用 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
      
    />
  )

【参考方案1】：

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

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

【讨论】：

感谢@JoseLora 的编辑，这是我关于堆栈溢出的第一个答案。

没问题，你开始做得很好。

【参考方案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 ... />

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案3】：

您可以使用 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),
             ,
           ]