FAQ expansion?

We’re getting a lot of people on gitter asking about how to make components stylable - as in styled(Link) - usually having run into needing the className prop used meaningfully on their component. This should probably be clarified in documentation, and is justified for entry as a frequently asked question.

Something to the effect of this:

How do I use styled-components to style my custom components?

Any component which uses the classNameprop sensibly will work with styled-components.

const MyComp = props => <div className={props.className}>
  This is my content
</div>

const MyStyledComp = styled(MyComp)`
  background-color: red;
`;

Not that the className passed in props gets applied to the <div> tag in the example component. This is how styled-components applies style to elements.

[mxstbr]

I think the best way to go forward with docs is to move them to the website. Embedded live snippets and nice navigation should clear up a lot of common confusions, I just don’t have time to dig in right now 😕

[kitten]

@mxstbr I think the right way to go forward with the docs is to have a “recipes” section for stuff like this. It’s too easy to miss things, if the most important things are just in the readme with brief descriptions and instructions.