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

Question

当您的已知选项数量有限时，material-ui 中单元格表的样式很好，但我在事先不知道的情况下很挣扎。
为简化起见，我们的想法是根据表格单元格值为每个单元格设置背景颜色(假设单元格的值实际上是颜色)。
使用 cellRenderers 是有限的(不是一个干净的选择)。
当前的解决方案看起来像( doc ):

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

如何在 material-ui v5/emotion ( doc ) 中创建动态添加样式或 css。就像是 :

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

Answer 1

我认为这归结为创建一个 mui 类的问题，该类应用收到的 Prop 的样式。
您可以利用 material ui useStyles hook 高级功能来创建接受 props 的 mui 类，因此您可以根据需要传递一些样式细节。

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});

function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

您可以从 here. 中找到该文档。