Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior persisted even within a Flexbox container I created. However, specifying a width for the FlexContainer component resulted in the small button expanding to 100% of that container's width.
I prefer not to set a default width on the button as it should adjust its size based on the button text. I attempted to apply "display: inline-flex" directly on the button, but saw no change in behavior.
Below is a snippet of the container component:
<RightFields flexDirection="column">
<FieldSpacing>
<PasswordDisplay />
</FieldSpacing>
<FieldSpacing>
<PaymentDisplay />
</FieldSpacing>
<Button pink
buttonText="Save Changes"
buttonSize="small"
/>
</RightFields>
...
const RightFields = styled(FlexContainer)`
width: 321px;
`
Button.js
const Button = ({buttonText, buttonSize, ...props}) => {
return (
<>
{buttonSize === 'large' ?
<LargeButton
variant="contained"
fullWidth={true}
size="large"
{...props}
>
{buttonText}
</LargeButton> :
<SmallButton
variant="contained"
size="small"
{...props}
>
{buttonText}
</SmallButton>
}
</>
)
}
const StyledButton = styled(MaterialButton)`
...
`
const LargeButton = styled(StyledButton)`
...
`
const SmallButton = styled(StyledButton)`
display: inline-flex;
flex-grow: 0;
font-size: 15px;
font-weight: 500;
line-height: 18px;
border-radius: 16px;
height: 28px;
min-width: 50px;
padding: 0 16px;
`