如何更改onRowAdd，onRowUpdate，onRowDelete的材料表图标的颜色? [英] How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?

问题描述

我尝试在物料表的库中进行基本的粗略操作.通过使用 onRowAdd ， onRowUpdate ， onRowDelete ，我得到了相同的图标，但是我想知道如何更改其颜色.这三个图标中的每一个?

您可以看到我的表格中的图标很少，而我专注于添加，编辑，删除图标，我想更改这些图标的颜色.

这是

I tried to the material-table the library for basic crud operation. By using onRowAdd, onRowUpdate, onRowDelete, I get the icons for the same but I would like to know that how can I change the color of each of these three icons?

You can see my table has few icons and I am focusing on add, edit, delete icons I want to change color of these icons.

Here is the link to my codesandbox.

App.js file

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;

解决方案

You can override the icons and provide custom styles by setting the icons props. It accepts an object where the key is a type of operation (Add, Edit, Delete,...) and the value is an icon component. For reference, see the all-props section here.

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

Live Demo

这篇关于如何更改onRowAdd，onRowUpdate，onRowDelete的材料表图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！