动作图标显示为纯文本
Action Icons appearing as plain text
我正在使用 material-table (https://material-table.com/#/) 作为一个 React 项目,我已经导入了我需要使用的图标,但是在操作栏中的操作是显示为纯文本,而不是 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;
我希望出现实际的打印图标,但它显示为文本阅读 'print'。如果我使用小写 'print',也会发生这种情况。如果我使用 table 会抛出错误。
我也遇到了这个问题并相应地更新了打字稿文档。您必须将它们包装在一个函数中。要启用工具提示,您必须像这样转发自 muiv4 以来的参考:
Add: forwardRef((props, ref) => <Add {...props} ref={ref} color='action' />)
我只是用了同一个库,要么是文档有误,要么是代码有bug,反正修复如下:
actions={[
{
icon: () => <AddBox />,
tooltip: 'Add User',
onClick: (event) => alert("You want to add a new row")
}
]}
显然,您必须将操作和图标更改为您想要使用的内容。
我尝试了以下解决了我的问题
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
我正在使用 material-table (https://material-table.com/#/) 作为一个 React 项目,我已经导入了我需要使用的图标,但是在操作栏中的操作是显示为纯文本,而不是 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;
我希望出现实际的打印图标,但它显示为文本阅读 'print'。如果我使用小写 'print',也会发生这种情况。如果我使用 table 会抛出错误。
我也遇到了这个问题并相应地更新了打字稿文档。您必须将它们包装在一个函数中。要启用工具提示,您必须像这样转发自 muiv4 以来的参考:
Add: forwardRef((props, ref) => <Add {...props} ref={ref} color='action' />)
我只是用了同一个库,要么是文档有误,要么是代码有bug,反正修复如下:
actions={[
{
icon: () => <AddBox />,
tooltip: 'Add User',
onClick: (event) => alert("You want to add a new row")
}
]}
显然,您必须将操作和图标更改为您想要使用的内容。
我尝试了以下解决了我的问题 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