有没有办法改变用 material-table 构建的 tables 的远程数据加载图标的颜色？

Question

我正在使用这个库 material-table 作为我的数据 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>

有没有办法改变用 material-table 构建的 tables 的远程数据加载图标的颜色？

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

material-table