How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?

Question

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: '[email protected]', phone: [phone], city: "Bangalore" },
  { id: 2, name: "Raj", email: '[email protected]', phone: [phone], city: "Chennai" },
  { id: 3, name: "David", email: '[email protected]', phone: [phone], city: "Jaipur" },
  { id: 4, name: "Vikas", email: '[email protected]', 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;

Catamnesis

Answer 1

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

Evaporite

That's so cool. Didn't knew I can use icons as props too. Thank you so much for guiding me :-) – Catamnesis

Answer 2

It's Simple. Inspect on the page and Select the Icon and Copy its style Name in Styles Tab.

Now, Go to App.css file and Create New Style with the icon style name shown on Inspect-styles area and there you can enter your desired color.

It will work.

In your App.css File, Add below code

.MuiIconButton-colorInherit {
    color: red;
}

change to any color

Mesa