Bridge uses styled-system to add sets of styling props to components. This enables ease of styling via props. For additional information on their styling props, check their reference table
There are a couple common styling prop groups that components may have.
COMMON
the COMMON common prop group is enabled in most components. This group of props includes styling for layout, spacing, and colors.
| Prop | CSS Property | Theme Field |
|---|---|---|
m, margin | margin | space |
mt, marginTop | margin-top | space |
mr, marginRight | margin-right | space |
mb, marginBottom | margin-bottom | space |
ml, marginLeft | margin-left | space |
mx, marginX | margin-left and margin-right | space |
my, marginY | margin-top and margin-bottom | space |
p, padding | padding | space |
pt, paddingTop | padding-top | space |
pr, paddingRight | padding-right | space |
pb, paddingBottom | padding-bottom | space |
pl, paddingLeft | padding-left | space |
px, paddingX | padding-left and padding-right | space |
py, paddingY | padding-top and padding-bottom | space |
width | width | sizes |
height | height | sizes |
minWidth | min-width | sizes |
maxWidth | max-width | sizes |
minHeight | min-height | sizes |
maxHeight | max-height | sizes |
size | width height | sizes |
display | display | none |
verticalAlign | vertical-align | none |
overflow | overflow | none |
overflowX | overflowX | none |
overflowY | overflowY | none |
color | color | colors |
bg, backgroundColor | background-color | colors |
opacity | opacity | none |
TYPOGRAPHY
typography props will generally occur in text components. For most other components, you may need to override the theme instead - this is to stay consistent with the typography within your design. Check out how to override the default Bridge theme.
| Prop | CSS Property | Theme Field |
|---|---|---|
fontFamily | font-family | fonts |
fontSize | font-size | fontSizes |
fontWeight | font-weight | fontWeights |
lineHeight | line-height | lineHeights |
letterSpacing | letter-spacing | letterSpacings |
textAlign | text-align | none |
fontStyle | font-style | none |
FLEX
FLEX props include flexbox css properties
| Prop | CSS Property | Theme Field |
|---|---|---|
alignItems | align-items | none |
alignContent | align-content | none |
justifyItems | justify-items | none |
justifyContent | justify-content | none |
flexWrap | flex-wrap | none |
flexDirection | flex-direction | none |
flex | flex (shorthand) | none |
flexGrow | flex-grow | none |
flexShrink | flex-shrink | none |
flexBasis | flex-basis | none |
justifySelf | justify-self | none |
alignSelf | align-self | none |
order | order | none |
BORDER
BORDER props include any styling for borders (usually used in wrappers around divs - e.g. Box, Flex)
| Prop | CSS Property | Theme Field |
|---|---|---|
border | border | borders |
borderWidth | border-width | borderWidths |
borderStyle | border-style | borderStyles |
borderColor | border-color | colors |
borderRadius | border-radius | radii |
borderTop | border-top | borders |
borderTopWidth | border-top-width | borderWidths |
borderTopStyle | border-top-style | borderStyles |
borderTopColor | border-top-color | colors |
borderTopLeftRadius | border-top-left-radius | radii |
borderTopRightRadius | border-top-right-radius | radii |
borderRight | border-right | borders |
borderRightWidth | border-right-width | borderWidths |
borderRightStyle | border-right-style | borderStyles |
borderRightColor | border-right-color | colors |
borderBottom | border-bottom | borders |
borderBottomWidth | border-bottom-width | borderWidths |
borderBottomStyle | border-bottom-style | borderStyles |
borderBottomColor | border-bottom-color | colors |
borderBottomLeftRadius | border-bottom-left-radius | radii |
borderBottomRightRadius | border-bottom-right-radius | radii |
borderLeft | border-left | borders |
borderLeftWidth | border-left-width | borderWidths |
borderLeftStyle | border-left-style | borderStyles |
borderLeftColor | border-left-color | colors |
borderX | border-left & border-right | borders |
borderY | border-top & border-bottom | borders |