我实现了一个 MUI-DATABLE,我想设置它的样式,但我不知道怎么做。
问问题
3342 次
2 回答
1
改变滤光片的颜色
如果您只想更改颜色,根据MUI Datatables 文档,可以通过使用主题覆盖来完成此操作。为此,您可以按照MUI 数据表文档中的示例进行操作,也可以查看此代码沙箱以获取实时示例。代码可以这样设置:
import React from "react";
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
export default function App() {
// Here, we use createMUITheme to apply the custom styles to
// the filter chip with an override on the MuiChip-root class:
const getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiChip: {
root: {
backgroundColor: "lightgrey"
}
}
}
});
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false
}
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false
}
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false
}
}
];
const data = [
{ name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
{ name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
{ name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
{ name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" }
];
const options = {
filterType: "checkbox"
};
// Now, we wrap the MUI Datatable in the MUIThemeProvider to apply
// the styles:
return (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable columns={columns} data={data} options={options} />
</MuiThemeProvider>
);
}
定制过滤芯片
如果您要做的是使用自定义过滤器芯片组件而不是默认的灰色过滤器芯片,您可以将自定义过滤器芯片组件传递给自定义过滤器列表组件。然后,您可以将该过滤器列表组件传递给表的 components 属性,如下所示:
import React from "react";
import "./styles.css";
// Import the chip component frfom Material UI or a
// custom component of your choosing:
import Chip from '@material-ui/core/Chip';
// Import the TableFilterList from mui-datatables:
import MUIDataTable, { TableFilterList } from "mui-datatables";
// Here is the custom chip component. For this example, we are
// using the outlined chip from Material UI:
const CustomChip = ({ label, onDelete }) => {
return (
<Chip
variant="outlined"
color="secondary"
label={label}
onDelete={onDelete}
/>
);
};
// Here is the custom filter list component that will display
// the custom filter chips:
const CustomFilterList = (props) => {
return <TableFilterList {...props} ItemComponent={CustomChip} />;
};
export default function App() {
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false
}
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false
}
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false
}
}
];
const data = [
{ name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
{ name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
{ name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
{ name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" }
];
const options = {
filterType: "checkbox"
};
// Finally, we pass the CustomFilterList to the table's components
// prop:
return (
<div className="App">
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
components={{
TableFilterList: CustomFilterList,
}}
/>
</div>
);
}
同样,这个例子取自MUI Datatables 文档,我在这个 Code Sandbox中有一个活生生的例子。
于 2021-02-08T03:30:22.450 回答
0
一个解决方案可能是在 CSS 中使用您的选择器非常具体。这将是这样的:
mui-datatable > header > bubbles > .someClassMadeByMuiDatatable {}
作为提示,您可以使用 Google Chrome 中的检查器,选择树结构 (HTML) 中的气泡,然后复制选择器。
关于 CSS 特异性的一般性阅读可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity中找到
于 2020-12-15T15:58:43.833 回答