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

Question

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

我想要的样式是使用过滤器时出现的气泡以及在表格顶部 根据截图是灰色的，我想有能力用我的设计来设计它们

Answer 1

改变滤光片的颜色

如果您只是想改变颜色，根据MUI Datatables docs，可以通过使用主题覆盖来完成此操作。为此，您可以按照MUI Datatables docs 上的示例进行操作，或者您可以查看此Code Sandbox 以获取实时示例。代码可以这样设置：

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 docs，我在 this Code Sandbox 中有一个实时示例。

Answer 2

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

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

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

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