有没有办法改变用 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 作为我的数据 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);
进度组件使用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 作为我的数据 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);
进度组件使用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>