Как исправить значки нумерации страниц (сбросить их по умолчанию) в таблице материалов (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

После установки компонента MaterialTable. Вам нужно сделать:

Шаг 1: Импортировать значки в свой индекс. 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/

Answer 2

Здесь проблема с тем, что ваша иконка не получает css, потому что нам нужно предоставить ссылку в индексе. js

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

Вы можете проверить, как использовать иконки материалов material-ui