如何在 MUI-Datatables 中设置表格顶部的过滤器芯片的样式

Question

我实现了一个 MUI-DATABLE，我想设计它的样式，但我不知道怎么做。

我想要设置样式的是当您使用过滤器时出现的气泡，并且根据屏幕截图在表格顶部是灰色的，我希望能够使用我的设计来设置它们的样式

Answer 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中有一个活生生的例子。

Answer 2

一个解决方案可能是非常具体地使用 CSS 中的选择器。 这将是这样的：

mui-datatable > header > bubbles > .someClassMadeByMuiDatatable {}

作为提示，您可以使用 Google Chrome 中的检查器 select 树结构 (HTML) 中的气泡，然后复制选择器。

关于 CSS 中特异性的一般性阅读可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity中找到

Answer 3

看起来表配置中有一个内置选项可以执行此操作。

从文档中的这个例子。

https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js

setFilterChipProps: (colIndex, colName, data) => {
        //console.log(colIndex, colName, data);
        return {
          color: 'primary',
          variant: 'outlined',
          className: 'testClass123',
        };
      }