material-table - Is there a way to change the color of the loading icon from remote data for tables built with material-table?

Question

I'm using this library material-table for my data table. I get the primary color of my theme for the circular-progress loading icon. I'd like to change it to the secondary color but I don't see any props for changing the styling for it.

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>