Блог

Я использую таблицу пользовательского интерфейса material, но, к сожалению, ее цвет шрифта белый, поэтому я не могу видеть текст, но при выборе текста я вижу данные, и также есть проблема со значками, хотя я хорошо установил библиотеки. Ниже приведен код:

 import React,{useState,useEffect} from 'react';
import MaterialTable from 'material-table';
import '@material-ui/core';
import '@material-ui/icons';
import '@material-ui/lab';

export default function AdminXnaLog() {
  const [data, setData] = useState([]); //table data
  const [iserror, setIserror] = useState(false)
  const [errorMessages, setErrorMessages] = useState([])
  var columns = [
    {title: "id", field: "_id", hidden: true},
    {title: "Member No", field: "memberno"},
    {title: "Name", field: "name"},
    {title: "Surname", field: "surname"}
    ]
   
useEffect(() => {
        async function fetchBooks() {
          const response = await fetch('/xnalogget');
          const json = await response.json();
          setData(json.xl);
          console.log(json.xl)
      }
      fetchBooks();
  },[]);
  
  
  return (
   
    <MaterialTable
  title="XNA Logs"
  columns={columns}
  data={data}
  style={{ backgroundColor: "white", margin: "3%" }}  // editable={{
/>
    
  )
}
 

Это изображение, на котором цвет шрифта и значки не работают.

Непонятно, где вы хотите использовать значки? Вы вообще не используете поддержку значков ( icons= переданную в компонент) для MaterialTable.

Из документации:

 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}
  ...
/>
 

https://material-table.com/#/docs/install

И вы можете использовать их по имени внутри таблицы, например, с помощью действия:

 <MaterialTable
  // other props
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => {
        // Do save operation
      }
    }
  ]}
/>

 

где icon -строковое значение, ссылающееся на значок.

Вы также можете добавить еще один компонент, как в этом ответе: https://material-table.com/#/docs/features/actions