react材质表无法更改每个图标集的颜色

Question

我正在使用材质表库，并尝试更改每个图标的颜色。你能帮我这么做吗？我尝试过自定义CSS，但它一次改变了所有图标的颜色，而不是特定的颜色？这是我的代码沙箱链接。简而言之：我想更改添加、编辑、删除三个图标的颜色

这是我的代码，我正在使用一个带有材料ui的材料表库。还有可能更改这些默认图标吗？

List.js

import React, { useState } from 'react';
import './App.css';
import MaterialTable from 'material-table'
import makeStyles from "@material-ui/core/styles/makeStyles";

const useStyles = makeStyles(theme => ({
rootTable: {
'& .MuiIconButton-colorInherit' : {
color: '#6a2cd8'
},
'& .MuiIconButton-root .MuiIconButton-colorInherit': {
color: 'red'
},
width: theme.spacing(150)
}
}));

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", }
]

const classes = useStyles();
return (
<div className="App">
<h1 align="center">React-App</h1>
<h4 align='center'>Material Table with CRUD operation</h4>
<div className={classes.rootTable}>
<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>
</div>
);
}
export default App;

Answer 1

您可以从@material-ui/icons导入要更改颜色的图标，更改所需的颜色，并将它们作为icons道具传递给MaterialTable:codesandbox。

import { Edit } from "@material-ui/icons";
...
icons={{
Edit: React.forwardRef((props, ref) => (
<Edit style={{ color: "green" }} {...props} ref={ref} />
))
}}