React MUI fills properties clockwise

Question

Does MuiBox have any populated shorthand properties? for clockwise syntax?

This is invalid and will cause a syntax error.

<Box padding = {2 1 1 2}/>

Answer 1

Strictly speaking, there will be no such shorthand attribute, and the padding/p attribute only accepts a single spacing value. If you don't want to use the provided long-hand properties (pt, pr, pb, pl) and for some reason need to pass them as a list, the best way is to provide a function to the padding/p property from which Box can be derived value (if you don't want to use sx). For example:

<Box
  padding={(theme) => theme.spacing(2, 1, 1, 2)}
/>

Runnable CodeSandbox example code: : https://codesandbox.io/s/box-padding-example-r6v28m?file=/demo.tsx