0

Is there a cleaner way to write the following that takes advantage of the sx prop's access to spacing units?

<MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} />

Something like this?

<MUIComponent sx={{ borderRadius: [1, 2, 3, 4] }} />

I can't find anything in the docs, but I'd be surprised if this feature doesn't exist...

Ric Donati
  • 25
  • 5

1 Answers1

2

Yes, and you are very close! You can use your theme to set the amounts of borderRadius. https://mui.com/system/getting-started/the-sx-prop/#theme-aware-properties

From the docs link above: "The borderRadius property multiplies the value it receives by the theme.shape.borderRadius value (the default for this value is 4px)."

<Box sx={{ borderRadius: 2 }} />
// equivalent to borderRadius: '8px'

To add multiple borders, for top, left, etc: https://mui.com/system/borders/#additive

or you can import your theme to the component and use theme.spacing (https://mui.com/material-ui/customization/spacing/#custom-spacing):

<MUIComponent sx={{ borderRadius: theme.spacing(1, 2, 3, 4) }} />
beepboopiamabot
  • 70
  • 7