Início / coding / Perguntas / 79564125
Accepted
Bianca
Asked: 2025-04-09 18:42:51 +0800 CST

Material-UI, mesclando slots de adereços para componente filho

  • 772

Tenho muitos componentes de grade de dados que são muito semelhantes entre si, exceto alguns parâmetros que passo como adereços, eles compartilham o mesmo rodapé personalizado dentro dos slots e alguns estilos

export default function CustomizedDataGrid(otherParams) {
return (
            <Box sx={{ width: "100%", overflow: "hidden" }}>
                <DataGrid
                    disableRowSelectionOnClick
                    sx={{
                        border: "none",
                        overflowY: "hidden",
                        width: "100%",
                    }}
                    slots={{
                        footer: CustomFooter
                    }}
                    {...otherParams}
                    />
            </Box>
        ); }

Mas quando eu instanciar CustomizedDataGrid e passar um parâmetro de slot como este

export default function SpecializedDataGrid() {
return (
      <CustomizedDataGrid
            columns={columns}
            rows={rows}
            slots={{
                toolbar: CustomToolbar,
            }} /> ); }

Ele substitui os slots declarados dentro de CustomizedDataGrid, de modo que a barra de ferramentas é exibida, mas não o rodapé. Existe uma maneira de mesclar os parâmetros que passei como propriedades dentro de SpecializedDataGrid com os que declarei dentro de CustomizedDataGrid?

javascript

1 respostas

  1. Best Answer

    Componente CustomizedDataGrid atualizado com mesclagem de slots:

    export default function CustomizedDataGrid({ slots: customSlots = {}, ...otherParams }) {
    return (
        <Box sx={{ width: "100%", overflow: "hidden" }}>
            <DataGrid
                disableRowSelectionOnClick
                sx={{
                    border: "none",
                    overflowY: "hidden",
                    width: "100%",
                }}
                slots={{
                    footer: CustomFooter, // default slot
                    ...customSlots,      // override or add more slots
                }}
                {...otherParams}
            />
        </Box>
    );
}

    O uso no SpecializedDataGrid permanece o mesmo:

    export default function SpecializedDataGrid() {
    return (
        <CustomizedDataGrid
            columns={columns}
            rows={rows}
            slots={{
                toolbar: CustomToolbar,
            }}
        />
    );
}
    • 0

relate perguntas