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

admin管理员组

文章数量:1329825

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

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

• javascript
• reactjs
• material-ui
• material-table

Share Improve this question Follow edited Apr 19, 2021 at 11:06 NearHuscarl 81.8k2222 gold badges319319 silver badges281281 bronze badges asked Apr 19, 2021 at 10:00 aishcriptaishcript 56311 gold badge1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ponent. For reference, see the all-props section here.

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

Live Demo

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

本文标签：