Javascript 如何在MUI数据表中设置表格顶部的滤波芯片

我实现了一个MUI-DATABLE，我想设计它的样式，但我不知道如何

我想设计的是当你使用过滤器时出现的气泡和在表格顶部的气泡 根据截图，它们是灰色的，我希望有能力用我的设计来设计它们

---

解决方案可以是在CSS中使用非常特定的选择器。这将类似于：

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

作为提示，您可以使用Google Chrome中的inspector，在树结构（HTML）中选择气泡，然后复制选择器

有关CSS特异性的一般阅读，请参见改变过滤芯片的颜色 如果您只想改变颜色，根据，可以通过使用主题覆盖来实现这一点。要做到这一点，您可以按照上的示例进行操作，也可以查看一个实例。代码可以如下设置：

从“React”导入React；
从“mui数据表”导入MUIDataTable；
从“@material ui/core/styles”导入{createMuiTheme，MuiThemeProvider}”；
导出默认函数App（）{
//在这里，我们使用CreateMuiteme将自定义样式应用于
//在MuiChip根类上具有覆盖的过滤器芯片：
常量getMuiTheme=（）=>
创造博物馆({
覆盖：{
穆伊希普：{
根目录：{
背景颜色：“浅灰色”
}
}
}
});
常量列=[
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：正确
}
},
{
名称：“公司”，
标签：“公司”，
选项：{
过滤器：对，
排序：false
}
},
{
名称：“城市”，
标签：“城市”，
选项：{
过滤器：对，
排序：false
}
},
{
名称：“国家”，
标签：“国家”，
选项：{
过滤器：对，
排序：false
}
}
];
常数数据=[
{姓名：“乔·詹姆斯”，公司：“测试公司”，城市：“扬克斯”，州：“纽约”}，
{名称：“约翰·沃尔什”，公司：“测试公司”，城市：“哈特福德”，州：“CT”}，
{名称：“Bob Herm”，公司：“测试公司”，城市：“坦帕”，州：“佛罗里达州”}，
{名称：“詹姆斯·休斯顿”，公司：“测试公司”，城市：“达拉斯”，州：“德克萨斯州”}
];
常量选项={
filterType:“复选框”
};
//现在，我们将MUI数据表包装在MUIThemeProvider中以应用
//风格：
返回(
);
}

---

定制滤波芯片 如果您想使用自定义过滤芯片组件而不是默认的灰色过滤芯片，则可以将自定义过滤芯片组件传递给自定义过滤列表组件。然后，将过滤器列表组件传递给表的组件属性，如下所示：

从“React”导入React；
导入“/styles.css”；
//导入芯片组件frfom材料UI或
//您选择的自定义组件：
从“@material ui/core/Chip”导入芯片；
//从mui数据表导入TableFilterList：
从“mui数据表”导入MUIDataTable，{TableFilterList}；
//这是定制芯片组件。对于这个例子，我们是
//使用Material UI中概述的芯片：
const CustomChip=（{label，onDelete}）=>{
返回(
);
};
//下面是将显示的自定义筛选器列表组件
//定制过滤芯片：
const CustomFilterList=（道具）=>{
返回；
};
导出默认函数App（）{
常量列=[
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：正确
}
},
{
名称：“公司”，
标签：“公司”，
选项：{
过滤器：对，
排序：false
}
},
{
名称：“城市”，
标签：“城市”，
选项：{
过滤器：对，
排序：false
}
},
{
名称：“国家”，
标签：“国家”，
选项：{
过滤器：对，
排序：false
}
}
];
常数数据=[
{姓名：“乔·詹姆斯”，公司：“测试公司”，城市：“扬克斯”，州：“纽约”}，
{名称：“约翰·沃尔什”，公司：“测试公司”，城市：“哈特福德”，州：“CT”}，
{名称：“Bob Herm”，公司：“测试公司”，城市：“坦帕”，州：“佛罗里达州”}，
{名称：“詹姆斯·休斯顿”，公司：“测试公司”，城市：“达拉斯”，州：“德克萨斯州”}
];
常量选项={
filterType:“复选框”
};
//最后，我们将CustomFilterList传递给表的组件
//道具：
返回(
);
}

同样，这个例子取自，我在中有一个活生生的例子