I'm facing a challenge with my modal design for mobile view. I need the buttons to display in a stacked format, one above the other, taking up the full width of the modal. I've been exploring ways to override the existing CSS within the component to achieve this layout as shown in the image attached. Below is the structure of the parent and child components involved:
Parent Component:
<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>
Child Component:
<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',
}),
},
}}
>
Despite trying to apply custom CSS using the sx prop, the buttons still appear side by side instead of stacked. Any suggestions on how to successfully override this? Refer to the following images for clarification:
Current Layout: https://i.stack.imgur.com/IOhi5.png