Which react component library works best with styled-components?

So you don't want to build your components from scratch, but you also want styled-components to fill all your extra style needs? Having spent the last week weighing the pros and cons of three component libraries:

• Material-UI
• Rebass
• Semantic UI React

I can assure you there are no good options. So it is with a complacent heart that I invite you to evaluate which of these so-so options we dislike the least. Here they are evaluated by category:

Documentation

Semantic UI React is the clear winner when it comes to documentation. Even Material Design with its 500+ contributors fails to beat the ease-of-use of the Semantic UI React docs. Quick navigation, clearly labeled prop types, and every example can be modified in a code editor attached below the output.

Rebass' docs are lacking in detail to say the least. The types for each prop are not listed, and rather than a recurring list of common props for each component, a top level "Props" tab presumably applies to every component in the library.

While documentation may seem like an insignificant factor to some, bad documentation promotes bad use which can squander hours of precious development time.

Community

Material UI is a legion of followers, Rebass is a one-man-army, and Semantic UI React is somewhere in between. If using either Material-UI or Semantic every question you have will likely be an issue on GitHub or StackOverflow. That being said, Rebass is a small library, which makes it plausible to jump into the source to answer your own question.

Overriding Styles

In most projects, component library styles will not be used as-is. Especially when styling based on a design document, there will be some style overrides you'll need to apply to the component library. In the case of Rebass, which is built using styled-components, style extension works out of the box. In fact, each component comes pre-wrapped in the styled function, so style extension is as easy as

MyComponent.extend`
  color: red;
`;

And since Rebass is very minimalist there aren't many rules to override. It truly feels like a clean slate.

This cannot be said for Material-UI or Semantic. Pretty quickly we were in an arms-race of CSS specificity with whacky selectors such as:

&&&&&&& { color: red !important }

It became clear this was not sustainable.

Conclusion

Rebass is by far the most cohesive component library to use with styled-components. Ultimately, it was this style overriding that proved to be a deal breaker for Material UI and Semantic.

However, if you're looking for something that will immediately make your app look good and you don't care to deviate from the styles of the library, you're better off using either Semantic or Material UI. You will not be disappointed by their excellent docs, communities, and design.