有没有办法从使用material-table构建的表的远程数据更改加载图标的颜色？

Question

我正在使用这个库material-table作为我的数据表。我获得了圆形进度加载图标的主题颜色。我想把它改成次要颜色，但我没有看到任何改变它的造型的道具。

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

Answer 1

它使用material-ui主题的原色作为进度组件。因此，您可以覆盖主题的主要颜色以更改颜色。例：

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

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