Есть ли способ изменить цвет значка загрузки с удаленных данных для таблиц, созданных с использованием таблицы материалов? - PullRequest
Новая
       14

Есть ли способ изменить цвет значка загрузки с удаленных данных для таблиц, созданных с использованием таблицы материалов?

0 голосов
/ 18 апреля 2019

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


import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";

function App() {
  return (
    <MaterialTable
      columns={[
        {
          title: "Avatar",
          field: "avatar",
          render: rowData => (
            <img
              style={{ height: 36, borderRadius: "50%" }}
              src={rowData.avatar}
            />
          )
        },
        { title: "Id", field: "id" },
        { title: "First Name", field: "first_name" },
        { title: "Last Name", field: "last_name" }
      ]}
      data={query =>
        new Promise((resolve, reject) => {
          let url = "https://reqres.in/api/users?";
          url += "per_page=" + query.pageSize;
          url += "&page=" + (query.page + 1);
          fetch(url)
            .then(response => response.json())
            .then(result => {
              resolve({
                data: result.data,
                page: result.page - 1,
                totalCount: result.total
              });
            });
        })
      }
      title="Remote Data Example"
    />
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 Ответ

1 голос
/ 18 апреля 2019

Используется основной цвет темы материала-интерфейса для компонента прогресса. Таким образом, вы можете изменить основной цвет вашей темы, чтобы изменить цвет. Пример: 

import { MuiThemeProvider } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';

<MuiThemeProvider theme={createMuiTheme({ palette: { primary: { main: '#abc' } } })}>
          <MaterialTable
            ...
            isLoading
          />
</MuiThemeProvider>
...