如何更改 onRowAdd、onRowUpdate、onRowDelete 的材料表圖標的顏色？

Question

我嘗試在材料表庫中進行基本的 crud 操作。 通過使用onRowAdd 、 onRowUpdate 、 onRowDelete ，我得到了相同的圖標，但我想知道如何更改這三個圖標的顏色？

你可以看到我的表格有幾個圖標，我專注於添加、編輯、刪除圖標我想改變這些圖標的顏色。

這是我的代碼框的鏈接。

應用程序.js 文件

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

const empList = [
  { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, city: "Bangalore" },
  { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 9812345678, city: "Chennai" },
  { id: 3, name: "David", email: 'david342@gmail.com', phone: 7896536289, city: "Jaipur" },
  { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9087654321, 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;

Answer 1

您可以通過設置icons道具來覆蓋圖標並提供自定義 styles。 它接受 object ，其中鍵是一種操作（ Add 、 Edit 、 Delete ，...），值是圖標組件。 如需參考，請參閱此處的 all-props 部分。

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

現場演示

Answer 2

這很簡單。 檢查頁面和 Select 圖標並將其樣式名稱復制到 Styles 選項卡中。

現在，Go 到 App.css 文件並使用 Inspect-styles 區域中顯示的圖標樣式名稱創建新樣式，您可以在此處輸入所需的顏色。

它會起作用的。

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

.MuiIconButton-colorInherit {
    color: red;
}

更改為任何顏色