javascript - Action 图标显示为纯文本

Question

我正在为一个 React 项目使用 Material 表 ( https://material-table.com/#/ )，并且我已经导入了我需要使用的图标，但是在操作栏中，操作显示为纯文本，而不是 Material 图标。

import React, { forwardRef } from 'react';
import MaterialTable from 'material-table';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Print from '@material-ui/icons/Print';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const Table = ({columnData, data}) =>{
   const tableIcons = {
        Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
        Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
        Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
        Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
        DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
        Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
        Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
        Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
        FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
        LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
        NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
        PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
        Print: forwardRef((props, ref) => <Print {...props} ref={ref} />),
        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
        Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
        SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
        ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
        ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
    };


    return (
        <MaterialTable
            columns={columnData}
            data={data}
            options={{
                search: false,
                toolbar: false,
                showTitle: false,
                sorting: false
            }}
            actions={[
                {
                    icon: 'Print',
                    tooltip: 'Print Label',
                    onClick: (event, rowData) => alert("You printed " + rowData.description)
                }
            ]}
            icons={tableIcons}
        />
    )
}

export default Table;

我希望实际的打印图标出现，但它显示为文本“打印”。如果我使用小写的“打印”也会发生。如果我使用该表会引发错误。

Answer 1

我只是使用了同一个库，它要么是文档中的错误，要么是代码错误，无论如何它已经修复如下:

actions={[
  {
    icon: () => <AddBox />,
    tooltip: 'Add User',
    onClick: (event) => alert("You want to add a new row")
  }
]}

显然，您必须将操作和图标更改为您想要使用的内容。