[英]How to fix pagination icons (reset it to default) in material-table (React)?
我正在前端工作以显示表格并在 React 中使用材料表。 一切都很好,但我一直看到奇怪的分页图标(而不是普通的箭头),我不知道为什么:
我该如何解决?
下面是添加的材料表标签和属性:
<MaterialTable
title="Title"
columns={this.state.columns}
data={newDataTable}
options={{
selection: true
}}
options={{
search: false,
sorting: true
}}
actions={[
{
icon: () => <Checkbox />,
tooltip: 'checkbox'
},
{
icon: () => <InfoIcon />,
tooltip: 'info',
onClick: (event, item) => {
this.setState({
isOpen: true,
selectedItem: item
});
}
}
]}
/>
</div>
这里的问题是你的图标没有得到 css 因为我们需要在 index.js 中提供链接
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
您可以查看如何使用材质图标material-ui
安装 MaterialTable 组件后。 你需要做:
第 1 步:在 index.html 中导入图标
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
或安装@material-ui/icons
(作为组件导入)。
第 2 步:根据您的要求使用 MaterialTable 组件
import React from "react";
import "./styles.css";
import MaterialTable from "material-table";
export default function App() {
return (
<MaterialTable
title="Simple Action Preview"
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
actions={[
{
icon: "save",
tooltip: "Save User",
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
/>
);
}
这是工作代码: https : //codesandbox.io/s/sharp-robinson-7f6n7
现场演示: https : //7f6n7.csb.app/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.