MIXEDSPACING

You cannot define margin or padding and a direction at the same time.

For instance:

JavaScript

<Grid marginBottom="S" margin="L" />

is invalid because it's ambiguous: is "S" or "L" a valid for margin bottom?

If you want to define a different bottom margin value you can do so by either specifying all margins as individual props:

JavaScript

<Grid marginTop="L" marginRight="L" marginBottom="S" marginLeft="L" />

Or using the shorthand syntax, as follows:

JavaScript

<Grid margin="L L S" />

You can find more information on how the valid spacing formats here.