We use styled components at my work. The reason we like it above other solutions (at least speaking for myself) is:
You don’t need to provide class names, it just generates a component
const Button = styled.a`
width: 11rem;
background: transparent;
color: white;
`
// later
const myComponent = () => (<div><Button /></div>);
Also, you can make it dynamic very easily
const Button = styled.a`
width: 11rem;
background: ${{color} => color ? color : 'transperent' };
color: white;
`
This desugars to:
const Button = styled.a([
"width: 11rem; background:",
"; color: white;"
],
({color}) => color ? color : 'transperent'
)
Also, you can reference other components like so:
const Link = styled.a`
background: papayawhip;
color: palevioletred;
`;
const Icon = styled.svg`
${Link}:hover & {
fill: rebeccapurple;
}
`;
This seems like it’ll be really hard to type, I’m not sure if I can use Functors because components are usually modules in ReasonReact. I’m just wondering if anyone has any other ideas on how to make this kind of API in a sane way in Reasons’ type system.
Also, I’m assuming there’s not really tagged template literals in Reason as well…