Material-UI中如何合并父组件与子组件的Slots参数？

问题根源在于JavaScript对象展开的特性：当你在DataGrid组件上先声明slots={{footer: CustomFooter}}，再展开{...otherParams}时，otherParams里的slots会完全覆盖之前声明的slots对象，导致内部定义的Footer插槽被替换。

要实现内部参数与传入参数的合并，你可以手动合并插槽对象，具体修改CustomizedDataGrid的代码如下：

export default function CustomizedDataGrid(otherParams) {
  // 解构传入参数，分离出外部插槽和其余参数
  const { slots: incomingSlots, ...restParams } = otherParams;
  
  // 合并内部默认插槽与外部传入的插槽
  const mergedSlots = {
    footer: CustomFooter,
    ...incomingSlots
  };

  return (
    <Box sx={{ width: "100%", overflow: "hidden" }}>
      <DataGrid
        disableRowSelectionOnClick
        sx={{
          border: "none",
          overflowY: "hidden",
          width: "100%",
        }}
        slots={mergedSlots}
        {...restParams}
      />
    </Box>
  );
}

代码说明： #

1. 先解构otherParams，把传入的slots单独提取为incomingSlots，剩下的参数存入restParams
2. 创建mergedSlots对象，先放入内部默认的footer插槽，再展开incomingSlots——这样外部传入的插槽会补充到对象中，若外部传入同名插槽（比如footer），则会覆盖内部默认值，保留自定义灵活性
3. 将合并后的mergedSlots传给DataGrid，再展开其余参数

修改后，SpecializedDataGrid传入的toolbar插槽会和内部的footer插槽同时生效，不会出现Footer消失的问题。

内容的提问来源于stack exchange，提问作者Bianca