如何修復材料表（React）中的分頁圖標（將其重置為默認值）？

Question

我正在前端工作以顯示表格並在 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>

Answer 1

這里的問題是你的圖標沒有得到 css 因為我們需要在 index.js 中提供鏈接

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

您可以查看如何使用材質圖標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/