DownloadVisual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles, using components as a low-level styling construct could not be easier! Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries. styled-components is compatible with both React (for web) and React Native, meaning it's the perfect choice even for truly universal apps! If you're using tooling that has babel-plugin-macros set up, you can switch to the styled-components/macro import path instead to gain the effects of the babel plugin without further setup.
Features
- Use the best bits of ES6 and CSS to style your apps
- Use the styled-components Babel plugin if you can
- More legible class names, server-side rendering compatibility, and smaller bundles
- styled-components lets you write actual CSS in your JavaScript
- You can use all the features of CSS you use and love
- Media queries, all pseudo-selectors, nesting, etc.
Project Samples
