One of the challenges I encountered was styling a Button component from MUI:
export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({
marginTop: 8,
marginBottom: 8,
width: 'auto',
borderRadius: 3
}));
When I tried to create a Button using:
<DivStyle>
<Typography variant="h5"> Change Your Password </Typography>
<ButtonStyle variant="outlined">
Update Password
</ButtonStyle>
</DivStyle>
where DivStyle is defined as:
export const DivStyle = styled('div')(({ theme }) => ({
display: 'flex',
width: '90%',
minWidth: 300,
[theme.breakpoints.up('lg')]: {
width: '70%'
},
flexDirection: 'column',
paddingBottom: 0
}));
The issue arose when the Button appeared full-width in the parent div, contradicting the default setting of fullWidth=false mentioned in the MUI documentation.
I am curious as to why this inconsistency occurs even though the button should not be taking up the entire width.