spaceProps
spaceProps are props that represent a shorthand for specifying layout distances. The values for these props can be of type number, string, or a media query object with the following structure:
{ [breakpoint]: 'value' }
The 'breakpoint's must match the keys defined in your breakpoints object.
To configure the spaceProps, you need to provide an array of objects to the generator with the following properties:
| Property | Type | Description |
|---|---|---|
prop | string | Must be an exact CSS property related to spacing, such as margin or padding. |
list | object | An optional list of { [key]: value } pairs, where the value can be a string or number. |
units | string | An optional unit value to be appended to numeric input or the list numeric values. |
Here's an example of using spaceProps in a generator object:
generator.js
const spaceList = { large: 48, medium: 24, small: 16 };
export const generator = {
// ...namedProps
spaceProps: [
{ prop: 'padding', list: spaceList, units: 'px' },
{ prop: 'margin', list: spaceList, units: 'px' }
],
// ...variableProps
};
Usage example (assuming the transientPrefix config property is set to '$'):
MyComp.js
import { generateProps } from 'styled-gen';
import styled from 'styled-components';
const Div = styled.div`
// your CSS...
${generateProps};
`;
export const MyComp = () => (
<Div $pt={8}>
<h3>The `padding-top` for the wrapper div should be 8px.</h3>
<Div $mt={{ md: 'large', xs: 8 }}>
The margin top for this content should be 8px up to the `md` breakpoint and 48px above that.
</Div>
</Div>
);