Bestyled System

Bestyled system provides commonly-used groupings from styled-system

• border
• common
• flex and flex_item
• grid
• position
• svg
• touchable
• typography

It includes both the individual attribute and sx shorthands.

System UI

Usage

import { BorderProps, borderProps, CommonProps, commonProps, compose } from '@bestyled/system'

// compose multiple together for performance
const systemStyles = compose(borderProps, commonProps)

export const SHConversationBackground =
  styled <
  React.FC <
  BorderProps & CommonProps >>
    Position`
  background-color: ${props => props.theme.colors.SHOffWhite};
  background-image: url(img/background600.png);
  background-position: bottom left;
  background-repeat: repeat;
  flex-direction: column;
  ${systemStyles}
`