El siguiente código representa cuatro componentes (StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable).

El componente FilterStatusCode permite al usuario ingresar datos de búsqueda utilizando TagInput. Y si el usuario ingresa muchas etiquetas, este componente aumenta y extiende dos vecinos: Filter y LinkedTable. Rompiendo así la estructura de la página.

Dígame cómo hacer para que estirar el componente FilterStatusCode no afecte a los componentes vecinos.

 return( <Grid sx={ContainerStyle}> <StyledBreadcrumbs deviceId={props.deviceId} /> <Grid container spacing={1} sx={{ width: '100vw', height: '10vh' }}> <Grid sx={StyleTableContainer}> <CardContent> <Table> <TableBody> <TableRow> <TableCell> <FilterStatusCode isExpanded={isFilterStatusCodeExpanded} setIsExpanded={setIsFilterStatusCodeExpanded} setCodes={props.setCodes} /> </TableCell> </TableRow> </TableBody> </Table> </CardContent> </Grid> <Grid container xs={12} sm={7} lg={9} sx={StyleFilterAndLinkedTable}> <Filter pageName='Device list' showBackToButton={false} showFilter={true} /> {!isNaN(amountOfPages) && !isNaN(amountOfItems)? <LinkedTable filterData={filterData} applyFilter={applyFilter} /> : ''} </Grid> </Grid> </Grid> );

estilos:

 const ContainerStyle = { backgroundColor: '#f6f7f9', minHeight: 'calc(100vh - 112px)', } const StyleTableContainer = { padding: '20px 10px 0px 30px', minWidth: '300px' } const StyleFilterAndLinkedTable = { padding: '0px 0px 0px 30px' }