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>

是否可以通过物料表构建的表从远程数据更改加载图标的颜色？

1 个答案: