Tengo el siguiente componente:

 <Stack direction="row" spacing={2}> <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} /> <Loading text="Loading..." sx={{ position: 'relative', background: 'none', color: 'grey' }} recommendedSolutions={ <LoadingBtn onClick={refetch} variant="outlined" loadingIndicator="Refetching data..." loading={loading} > Try again </LoadingBtn> } /> </Stack>

Quiero poder cambiar el apoyo de direction del componente Stack en función del punto de interrupción de la pantalla. La pregunta es:

Puedo usar el componente de cuadrícula para resolver este problema de la siguiente manera:

 <Grid container> <Grid item sx={{ display: { xs: 'none', md: 'block' } }}> <Stack direction="row" spacing={2}> <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} /> <Loading text="Loading..." sx={{ position: 'relative', background: 'none', color: 'grey' }} recommendedSolutions={ <LoadingBtn onClick={refetch} variant="outlined" loadingIndicator="Refetching data..." loading={loading} > Try again </LoadingBtn> } /> </Stack> </Grid> <Grid item sx={{ display: { xs: 'block', md: 'none' } }}> <Stack direction="vertical" spacing={2}> <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} /> <Loading text="Loading..." sx={{ position: 'relative', background: 'none', color: 'grey' }} recommendedSolutions={ <LoadingBtn onClick={refetch} variant="outlined" loadingIndicator="Refetching data..." loading={loading} > Try again </LoadingBtn> } /> </Stack> </Grid> </Grid>

pero esto me hace repetir un código similar, ¿hay alguna manera de hacerlo dentro de la direction del propio componente Stack ? es una tarea difícil escribir tanto código