X-Styled

With xstyled/system you can easily override styles for your components. When you use a component (e.g. Select) that is wrapped by a container component (e.g. Field or ConnectedField), we want to make sure that the correct style props are passed to the correct component i.e. which props affect ConnectedField and which props affect Select.

We split these props at the container level so that…

1. width, margin and positioning props are applied to the container (e.g. w, margin, mt, position, top etc), and
2. all the rest are applied to the underlying component (e.g. padding, borderColor, fontSize etc).

Naked Select #

Show editor

Connected Select #

Social network
Show editor

Field Select #

Label
Show editor