Nulogy's components use styled-system to apply groups of style props to different types of components. These props correspond to their css equivalents and allow individual manipulation of a component's style.
|margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py,|
|width, height, minWidth, minHeight, maxWidth, maxHeight, display, verticalAlign, size|
|fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontStyle, textAlign|
|color, backgroundColor, bg|
|border, borderWidth, borderStyle, borderColor, borderRadius, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY,|
|position, zIndex, top, right, bottom, left|
For more information on each of these props, see the styled-system docs.
To see which props each component includes, see that component's documentation. But in general, the following rules apply:
- Block-level components (Alerts, Buttons, Cards, etc.) have access to space props.
- Text components (Text, Headings, Link) also have access to typography and colour props.
- The Box component has access to layout props and can be used to add borders, colours, and boxShadows around anything.
Styled-system will check the theme and use that if a key matches, e.g setting a
blue will display Nulogy's
#216beb, instead of the html default. If a key can't be found, it will be processed as a CSS value.