如何修复 material-table (React) 中的分页图标（将其重置为默认值）？

Question

我正在前端工作以显示 table 并在 React 中使用 material-table。一切都很好，但我一直看到奇怪的分页图标（而不是正常的箭头），我不确定为什么：

Weird pagination icons

我该如何解决？

下面是添加的 Material Table 标签和属性：

<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>

Answer 1

这里的问题是你的图标没有得到 css 因为我们需要在 index.js

中提供 link

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

您可以查看如何使用 material 图标 material-ui

Answer 2

安装 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/

如何修复 material-table (React) 中的分页图标（将其重置为默认值）？

How to fix pagination icons (reset it to default) in material-table (React)?

reactjs

pagination

material-ui

material-table