React Styled-Components: A smart way (Also React Native)

Simple Tricks and Tips to use Styled-Components in a better way.

1. Props at the component level

In styled-components, we can get access to the props of the component and create dynamic styles as follows.

The problem in this approach is that we need to create many functions to access props at multiple places. So the solution is deriving props in the component level as below. This makes adding, removing and edits props easier. Courtesy: This tweet

2. Props — Abstracting CSS and conditions

As we have learned to handle props in a better way, now its time for abstracting and making the styles cleaner. How do we achieve it? We could leverage the power of css package in styled-components as in this tweet.

In styled-components, we can either pass a string of styles or pass an array of different css strings. This way, we could abstract the…