0
176
VistasCómo anular el CSS del componente principal de MUI para mostrar: 'bloquear' para botones en reaccionar
Tengo un modal que requiere un cambio para nuestro punto de interrupción móvil en el que los botones deben mostrarse como una pila uno encima del otro. Cada botón debe ocupar el ancho del modal, algo así como la imagen adjunta. Estoy tratando de averiguar cómo anular el componente para cambiar el css.
Aquí está el componente principal:
<StyledDialogFooter sx={{ padding: 0, pt: 2 }}> {(secondaryButtonProps || secondaryButton) && ( <Button variant="contained" color="secondary" size="small" {...secondaryButtonProps} onClick={debouncedSecondaryClick} data-testid={noButtonTestId} > {secondaryButtonProps?.children ?? 'No'} </Button> )} {(primaryButtonProps || primaryButton) && ( <Button variant="contained" color="primary" size="small" {...primaryButtonProps} onClick={debouncedPrimaryClick} data-testid={yesButtonTestId} > {primaryButtonProps?.children ?? 'Yes'} </Button> )} </StyledDialogFooter>Componente que llama al padre, acepta accesorios de botón:
<Dialog open={open} loading={waitingForResponse} title={'Manage sharing'} onClose={onClose} paperSx={{ width: '380px !important' }} primaryButton primaryButtonProps={{ onClick: onSave, variant: 'contained', color: 'primary', children: 'Save', disabled: saveButtonDisabled, sx: { ...(breakpoint === 'sm' && { width: '100%', display: 'block', }), }, }} secondaryButton secondaryButtonProps={{ onClick: onCancel, variant: 'contained', color: 'secondary', children: 'Cancel', sx: { ...(breakpoint === 'sm' && { width: '100%', display: 'block', }), }, }} > He intentado agregar css personalizado con el accesorio sx, pero aún se muestra como los botones uno al lado del otro. ¿Alguna idea de cómo anular esto? 
Como es ahora: 
3 Respuestas
Responde la pregunta0
Mi pensamiento inicial para esto definitivamente implica usar Grid.
Sin embargo, no se trata de MUI Grid , sino de tomarse el tiempo de aprender la solución CSS para grid , ya que es mucho más robusta.
Aproveché los puntos de interrupción de MUI y la cuadrícula CSS regular juntos:
<Dialog> <DialogContent> <Box sx={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 2, }} > <Button sx={{ gridColumn: { xs: "span 12", sm: "span 12", md: "span 6", lg: "span 6", xl: "span 6", }, }} > Button_1 </Button> <Button sx={{ gridColumn: { xs: "span 12", sm: "span 12", md: "span 6", lg: "span 6", xl: "span 6", }, }} > Button_1 </Button> </Box> </DialogContent> </Dialog> El cuadro MUI es simplemente un div, por eso puse la cuadrícula en el cuadro. Esto utilizaría convenientemente los puntos de interrupción de MUI en sus botones para que abarquen todo el ancho del contenedor en las pantallas xs y sm . De todos modos, tómese el tiempo para aprender más sobre Grid (si no lo ha hecho): creo que es un salvavidas cuando trato de precisar los diseños.
0
deberías usar la pila:
<Stack direction={{ sm: 'column', md: 'row' }} spacing={{ xs: 1, sm: 2, md: 4 }} > <Item>Item 1</Item> <Item>Item 2</Item> <Item>Item 3</Item> </Stack>y reemplace cada elemento con botón o cualquier componente
0
Debe adoptar un enfoque diferente para lograr el resultado que desea utilizando los componentes que tiene de material-ui. El botón está diseñado de una manera específica y cambiar la forma en que se comporta debería ser su última opción. Es mejor que coloque los botones en un componente de pila que puede cambiar la dirección según el tamaño de la pantalla. Aquí sabrás como podrás hacerlo:
<Stack spacing={2} direction={{xs: 'column', sm: 'row', md: 'row'}}> <Button>Button 1</Button> <Button>Button 2</Button> </Stack>