React material-table 未显示 table 图标
React material-table is not displaying table icons
我有一个项目,我必须使用 table。我正在使用 material-table。但我似乎无法让它看起来正确。 table 所需的图标未显示,取而代之的是一些占位符文本。
这是我用来显示 table 的代码。我在项目中安装了 material-table 和 material-图标。
class RegistrationList extends Component {
state = {
registrations: [],
};
infoButtonHandler(id) {}
componentDidMount() {
axios.get("http://localhost:3030/api/items").then((res) => {
let registrations = [];
res.data.forEach((registration) => {
let childeren = "";
for (let i = 0; i < registration.childeren.length; i++) {
childeren += registration.childeren[i].name;
if (i + 1 !== registration.childeren.length) {
childeren += ", ";
}
}
registrations.push({
_id: registration._id,
name: registration.name,
childeren: childeren,
street: registration.street,
houseNumber: registration.houseNumber,
city: registration.city,
postalCode: registration.postalCode,
});
});
this.setState({ registrations: registrations });
});
}
rowClickedHandler(rowData) {
this.props.history.push("/RegistrationDetail/" + rowData._id);
}
render() {
let table = (
<MaterialTable
title="Overzicht"
columns={[
{ title: "familienaam", field: "name" },
{ title: "kinderen", field: "childeren" },
{ title: "dorp", field: "city" },
{ title: "postcode", field: "postalCode" },
{ title: "straat", field: "street" },
{ title: "nr.", field: "houseNumber" },
]}
data={this.state.registrations}
options={{
search: true,
}}
onRowClick={(event, rowData) => this.rowClickedHandler(rowData)}
/>
);
return <div>{table}</div>;
}
}
通过 yarn add @material-ui/core@4.2.1 将 material UI 升级到 @material-ui/core@4.2.1,希望它能正常工作
为了让它们正常工作,我手动添加了它们。
它在网站上说明了该怎么做 material-table
添加material个图标
有两种方法可以在 material-table 中使用图标,要么通过 html 导入 material 图标字体,要么导入 material 图标并使用 material-table 图标属性。
HTML
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
或
导入Material 图标
可以导入图标以在 material-table 中使用,从而比使用字体库更灵活地自定义 material table 的外观。
使用 npm 安装@material-ui/icons:
npm install @material-ui/icons --save
用纱线安装@material-ui/icons:
yarn add @material-ui/icons
如果您的环境不支持tree-shaking,推荐的图标导入方式如下:
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
如果您的环境支持tree-shaking,您也可以这样导入图标:
import { AddBox, ArrowDownward } from "@material-ui/icons";
注意:以这种方式导入命名导出将导致每个图标的代码都包含在您的项目中,因此不推荐,除非您配置 tree-shaking。它还可能影响热模块重新加载性能。来源:@material-ui/icons
例子
import { forwardRef } from 'react';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
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 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 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} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
<MaterialTable
icons={tableIcons}
...
/>
这种方法对我有用
import DeleteIcon from '@material-ui/icons/Delete';
actions={[
rowData => ({
icon: DeleteIcon,
tooltip: 'Delete User',
onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
disabled: rowData.birthYear < 2000
})
]}
我有一个项目,我必须使用 table。我正在使用 material-table。但我似乎无法让它看起来正确。 table 所需的图标未显示,取而代之的是一些占位符文本。
这是我用来显示 table 的代码。我在项目中安装了 material-table 和 material-图标。
class RegistrationList extends Component {
state = {
registrations: [],
};
infoButtonHandler(id) {}
componentDidMount() {
axios.get("http://localhost:3030/api/items").then((res) => {
let registrations = [];
res.data.forEach((registration) => {
let childeren = "";
for (let i = 0; i < registration.childeren.length; i++) {
childeren += registration.childeren[i].name;
if (i + 1 !== registration.childeren.length) {
childeren += ", ";
}
}
registrations.push({
_id: registration._id,
name: registration.name,
childeren: childeren,
street: registration.street,
houseNumber: registration.houseNumber,
city: registration.city,
postalCode: registration.postalCode,
});
});
this.setState({ registrations: registrations });
});
}
rowClickedHandler(rowData) {
this.props.history.push("/RegistrationDetail/" + rowData._id);
}
render() {
let table = (
<MaterialTable
title="Overzicht"
columns={[
{ title: "familienaam", field: "name" },
{ title: "kinderen", field: "childeren" },
{ title: "dorp", field: "city" },
{ title: "postcode", field: "postalCode" },
{ title: "straat", field: "street" },
{ title: "nr.", field: "houseNumber" },
]}
data={this.state.registrations}
options={{
search: true,
}}
onRowClick={(event, rowData) => this.rowClickedHandler(rowData)}
/>
);
return <div>{table}</div>;
}
}
通过 yarn add @material-ui/core@4.2.1 将 material UI 升级到 @material-ui/core@4.2.1,希望它能正常工作
为了让它们正常工作,我手动添加了它们。
它在网站上说明了该怎么做 material-table
添加material个图标 有两种方法可以在 material-table 中使用图标,要么通过 html 导入 material 图标字体,要么导入 material 图标并使用 material-table 图标属性。
HTML
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
或
导入Material 图标 可以导入图标以在 material-table 中使用,从而比使用字体库更灵活地自定义 material table 的外观。
使用 npm 安装@material-ui/icons:
npm install @material-ui/icons --save
用纱线安装@material-ui/icons:
yarn add @material-ui/icons
如果您的环境不支持tree-shaking,推荐的图标导入方式如下:
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
如果您的环境支持tree-shaking,您也可以这样导入图标:
import { AddBox, ArrowDownward } from "@material-ui/icons";
注意:以这种方式导入命名导出将导致每个图标的代码都包含在您的项目中,因此不推荐,除非您配置 tree-shaking。它还可能影响热模块重新加载性能。来源:@material-ui/icons
例子
import { forwardRef } from 'react';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
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 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 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} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
<MaterialTable
icons={tableIcons}
...
/>
这种方法对我有用
import DeleteIcon from '@material-ui/icons/Delete';
actions={[
rowData => ({
icon: DeleteIcon,
tooltip: 'Delete User',
onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
disabled: rowData.birthYear < 2000
})
]}