react Material-table无法更改每个图标集的颜色？ [复制]答案

【问题标题】：react Material-table unable to change each icon set color? [duplicate]react Material-table无法更改每个图标集的颜色？ [复制]
【发布时间】：2021-07-19 00:18:53
【问题描述】：

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

这是我的代码，我正在使用带有 material-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: '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", }
  ]


  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;

【问题讨论】：

标签： javascript reactjs material-ui material-table

【解决方案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} />
  ))
}}

【讨论】：

谢谢。之前不知道 forwardRef 。 :-)