When I was designing my website using Mui, I specified a border radius in the theme settings:
{
palette: ...,
shadows: ...,
typography: ...,
shape: {
borderRadius: 3,
},
}
However, when I imported a Button from MUI and used it on my site, the button had a border radius of 3px. On the other hand, I created another box that utilized the theme.shape.borderRadius property, resulting in a more rounded appearance with a border radius of 9px.
Why are the border radii different even though they should be referencing the same value I defined in the theme?
<Button
variant="contained"
sx={{
width: "100px",
height: "36px",
color: "black",
backgroundColor: "white",
}}
>
Start now
</Button>
<Box
sx={{
width: "100px",
height: "36px",
color: "black",
backgroundColor: "white",
borderRadius: (theme) => theme.shape.borderRadius,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
Start now
</Box>
Using 'px' explicitly with the value works as intended, but that's not the ideal solution for me.
borderRadius: (theme) => theme.shape.borderRadius+'px'