显示为纯文本的操作图标

Posted 2023-02-22

【中文标题】显示为纯文本的操作图标

【英文标题】：Action Icons appearing as plain text

【发布时间】：2019-12-06 21:50:03

【问题描述】：

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

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;

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

【参考方案1】：

我只是使用了同一个库，要么是文档错误，要么是代码错误，反正修复如下：

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

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

【讨论】：

这成功了！！！我没有将它作为函数 actions=[icon: <AddBox />] 传递，而是元素本身......它解决了这个问题！谢谢亚历杭德罗

【参考方案2】：

我尝试了以下解决了我的问题 1)从material-ui/icons导入的图标

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

2) 用法

<MaterialTable
  title="User List"
  icons=tableIcons 
actions[icon:tableIcons.LogOut,tooltip:'LogoutUser',onClick(event,rowData)=>console.log('Logout clicked')]
/>

在您的情况下，它将是 tableIcons.Print

【参考方案3】：

我也遇到了这个问题，并相应地更新了打字稿文档。您必须将它们包装在一个函数中。要启用工具提示，您必须像这样转发自 muiv4 以来的 ref：

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

【讨论】：

我在 tableIcons const 中这样做。并且其他图标都出现了，只是好像在Actions Column里不起作用

哦，我明白了，你必须把它写成小写：icon: 'print'

也试过了，结果一样。它只是将文本更改为小写的“p”

好像是个bug，我会尝试PR修复。

好的，所以我研究了实现，如果你想使用自定义元素，你必须将它作为元素而不是字符串引用传递。因此，如果您从图标中删除 ''，它会将导入中的 material-ui 图标作为道具传递，这将正确呈现： icon: Print，其中 Print 是 import Print from '@material-ui/icons/打印';