0
269
Views¿Cómo alinear a la izquierda para Item1 y alinear a la derecha para Item2 y Item3 con MUI React?
Tengo un componente, que tiene tres componentes de Typography diferentes dentro. Quiero alinear "resumen" a la izquierda y "millas" y "duración" a la derecha.
Mi código está a continuación:
<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='flex-end'> <Box align='left'> <Typography>Summary</Typography> </Box> <Box> <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography> </Box> <Box> <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography> </Box> </Stack> Intenté jugar con el atributo de justifyContent pero no funcionó. Soy bastante nuevo en CSS y estilo, así que no estoy seguro de cuál es el mejor enfoque para esta situación. Cualquier ayuda o sugerencia alternativa es muy apreciada :)
·
Santiago Gelvez
1 answers
Answer question0
<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='space-between'> <Box align='left'> <Typography>Summary</Typography> </Box> <Stack direction="row" justifyContent={"flex-end"} spacing={1}> <Box> <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography> </Box> <Box> <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography> </Box> </Stack> </Stack>
·
Santiago Gelvez
Report
Answer question