Material ui 材质UI表格/XGrid-如何为每个单元格设置不同的颜色

当已知的选项数量有限时，material ui中的单元格表的样式设置是很好的，但当事先不知道时，我很难做到这一点

为了简化，我们的想法是基于表格单元格值设置每个单元格的背景色（让我们设想单元格的值实际上就是颜色）

使用CellRenders是有限的（不是一个真正干净的选项）

当前的解决方案看起来像（）：

---

根据您的问题，我知道您将收到颜色名称，并且需要在存在颜色名称的单元格上应用这些颜色

动态创建“clsx”方法中存在的对象

<代码> //让我们考虑在CARAMS中接收到的PARAMS中的一个键颜色。 const generateColorsObject=（颜色）=>{ const colorKey=颜色； const colorObject={} colorObj[colorKey]=颜色 return colorObj；//它的值类似于{'red'：'red'} } 常量列=[ { 字段：“名称”， cellClassName:“超级应用程序主题--单元格”， }, { 字段：'得分'， 键入：“编号”， 宽度：140， cellClassName：（参数）=> clsx（'super-app'，generateColorsObject（参数颜色））， }, ]; const useStyles=makeStyles({ 根目录：{ “&.super app.red”：{ backgroundColor:'红色'，//您需要为colorKey配置背景色 颜色：“#1a3e72”， 重量：'600'， }, “&.super app.blue”：{ 背景颜色：“蓝色”， 颜色：“#1a3e72”， 重量：'600'， }, “&.super app.orange”：{ 背景颜色：“橙色”， 颜色：“#1a3e72”， 重量：'600'， }, },

---

});我认为问题归根结底在于创建一个mui类，该类应用所收到的道具的样式

您可以利用material ui useStyles钩子高级功能创建接受道具的mui类，以便可以根据需要传递一些样式细节

const useStyles=makeStyles({
//样式规则
foo:props=>({
背景色：道具。背景色，
}),
酒吧：{
//CSS属性
颜色：props=>props.color，
},
});
函数MyComponent（）{
//用于示例目的的模拟道具
constprops={backgroundColor:'黑色'，color:'白色'}；
//将道具作为useStyles（）的第一个参数传递
常量类=使用样式（道具）；
返回
}

 cellClassName: (params: GridCellClassParams) =>
    clsx('super-app', {
      negative: (params.value as number) < 0,
     positive: (params.value as number) > 0,
    }),

 cellSx: (params: GridCellClassParams) =>{
    {
      backgroundColor: params.value
    }
  }),