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