Javascript 显示为纯文本的操作图标

我正在为react项目使用material table（），我已经导入了需要使用的图标，但在操作栏中，操作显示为纯文本，而不是材质图标

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;

import React，{forwardRef}来自'React'；
从“物料表”导入物料表；
从“@material ui/icons/AddBox”导入AddBox；
从“@material ui/icons/arrowUp”导入箭头向上；
从“@material ui/icons/Check”导入检查；
从“@material ui/icons/ChevronLeft”导入ChevronLeft”；
从“@material ui/icons/ChevronRight”导入ChevronRight；
从“@material ui/icons/Clear”导入清除；
从“@material ui/icons/DeleteOutline”导入DeleteOutline；
从“@material ui/icons/Edit”导入编辑；
从“@material ui/icons/FilterList”导入过滤器列表；
从“@material ui/icons/FirstPage”导入第一页；
从“@material ui/icons/LastPage”导入LastPage；
从“@material ui/icons/Print”导入打印；
从“@material ui/icons/Remove”导入删除；
从“@material ui/icons/SaveAlt”导入SaveAlt；
从“@material ui/icons/Search”导入搜索；
从“@material ui/icons/ViewColumn”导入ViewColumn；
常量表=（{columnData，data}）=>{
常数表图标={
Add:forwardRef（（props，ref）=>
我也遇到了这个问题，并相应地更新了typescript文档。您必须将它们包装在一个函数中。要启用工具提示，您必须从muiv4开始转发ref，如下所示：

Add: forwardRef((props, ref) => <Add {...props} ref={ref} color='action' />)

Add:forwardRef（（道具，ref）=>）
我刚刚使用了同一个库，它可能是文档中的错误，也可能是代码错误，但它的修复方法如下：


操作={[
{
图标：（）=>，
工具提示：“添加用户”，
onClick：（event）=>alert（“您想添加新行”）
}
]}
我尝试了以下方法，为我解决了问题
1） 从材质ui导入的图标/图标

import ExitToAppIcon from '@material-ui/icons/ExitToApp';
const tableIcons = {
LogOut: forwardRef((props, ref) => <ExitToAppIcon {...props} ref={ref} />)
}

从“@material ui/icons/ExitToApp”导入ExitToAppIcon；
常数表图标={
注销：forwardRef（（道具，ref）=>）
}

2） 用法

{console.log（'Logout clicked'）}}
/>

在您的情况下，它将是
表格图标。打印
我正在表格图标常量中执行此操作。其他图标也出现了，只是好像在“动作”栏中它不起作用。我明白了，你必须用小写写：图标：“打印”也试过了，同样的结果。它只是将文本更改为小写的“p”似乎是一个bug，我将尝试进行修复。好的，我研究了实现，如果要使用自定义元素，必须将其作为元素传递，而不是字符串referenece。因此，如果您从图标中删除“”，它将从导入中传递材质ui图标作为道具，该道具将正确呈现：icon:Print，其中Print是从“@material ui/icons/Print”导入打印；这成功了！！！我没有将它作为函数
actions={[{icon:}]}
传递，但是元素本身。。。它解决了这个问题！谢谢你，亚历杭德罗
<MaterialTable
  title="User List"
  icons={tableIcons} 
actions{[{icon:tableIcons.LogOut,tooltip:'LogoutUser',onClick(event,rowData)=>{console.log('Logout clicked')}}]}
/>