React MUI remplit les propriétés dans le sens des aiguilles d'une montre

Question

MuiBox possède-t-elle des propriétés abrégées renseignées ? pour la syntaxe dans le sens des aiguilles d'une montre ?

Ceci n'est pas valide et entraînera une erreur de syntaxe.

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

Answer 1

Simplement, il n'y aura pas d'attribut abrégé de ce type, l'attribut padding/p n'accepte qu'une seule valeur d'espacement. Si vous ne souhaitez pas utiliser les propriétés longues fournies (pt, pr, pb, pl) et que, pour une raison quelconque, vous devez les transmettre sous forme de liste, le meilleur moyen est de fournir une fonction à la propriété padding/p de quelle boîte peut être une valeur dérivée (si vous ne souhaitez pas utiliser sx). Par exemple :

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

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