如何更改 onRowAdd、onRowUpdate、onRowDelete 的材料表图标的颜色？

Posted 2023-02-22

【中文标题】如何更改 onRowAdd、onRowUpdate、onRowDelete 的材料表图标的颜色？

【英文标题】：How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?

【发布时间】：2021-07-13 12:35:24

【问题描述】：

我尝试在材料表库中进行基本的 crud 操作。通过使用onRowAdd、onRowUpdate、onRowDelete，我得到了相同的图标，但我想知道如何更改这三个图标的颜色？

你可以看到我的表格有几个图标，我主要关注添加、编辑、删除图标我想改变这些图标的颜色。

这是我的密码箱的link。

App.js 文件

import React,  useState  from 'react';
import './App.css';
import MaterialTable from 'material-table'

const empList = [
   id: 1, name: "Neeraj", email: '[e-mail]', phone: [phone], city: "Bangalore" ,
   id: 2, name: "Raj", email: '[e-mail]', phone: [phone], city: "Chennai" ,
   id: 3, name: "David", email: '[e-mail]', phone: [phone], city: "Jaipur" ,
   id: 4, name: "Vikas", email: '[e-mail]', phone: [phone], city: "Hyderabad" ,
]

function App() 

  const [data, setData] = useState(empList)
  const columns = [
     title: "ID", field: "id", editable: false ,
     title: "Name", field: "name" ,
     title: "Email", field: "email" ,
     title: "Phone Number", field: 'phone', ,
     title: "City", field: "city", 
  ]


  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <h4 align='center'>Material Table with CRUD operation</h4>
      <MaterialTable
        title="Employee Data"
        data=data
        columns=columns
        editable=
          onRowAdd: (newRow) => new Promise((resolve, reject) => 
            const updatedRows = [...data,  id: Math.floor(Math.random() * 100), ...newRow ]
            setTimeout(() => 
              setData(updatedRows)
              resolve()
            , 2000)
          ),
          onRowDelete: selectedRow => new Promise((resolve, reject) => 
            const index = selectedRow.tableData.id;
            const updatedRows = [...data]
            updatedRows.splice(index, 1)
            setTimeout(() => 
              setData(updatedRows)
              resolve()
            , 2000)
          ),
          onRowUpdate:(updatedRow,oldRow)=>new Promise((resolve,reject)=>
            const index=oldRow.tableData.id;
            const updatedRows=[...data]
            updatedRows[index]=updatedRow
            setTimeout(() => 
              setData(updatedRows)
              resolve()
            , 2000)
          )

        
        options=
          actionsColumnIndex: -1, addRowPosition: "first"
        
      />
    </div>
  );


export default App;

【参考方案1】：

您可以通过设置 icons 属性来覆盖图标并提供自定义样式。它接受一个对象，其中键是一种操作（Add，Edit，Delete，...），值是图标组件。如需参考，请参阅 all-props 部分here。

<MaterialTable
  ...props
  icons=
    Edit: () => <EditIcon style= color: "orange"  />,
    Delete: () => <DeleteIcon style= color: "red"  />
  
>

现场演示

【讨论】：

太酷了。不知道我也可以使用图标作为道具。非常感谢你指导我:-)

【参考方案2】：

这很简单。检查页面并选择图标并在样式选项卡中复制其样式名称。

现在，转到 App.css 文件并使用 Inspect-styles 区域中显示的图标样式名称创建新样式，然后您可以在其中输入所需的颜色。

它会起作用的。

在您的 App.css 文件中， 添加以下代码

.MuiIconButton-colorInherit 
    color: red;

换成任何颜色