Extend usage of styled-components in React

Hossein Rahimi — Fri, 27 Dec 2019 08:41:25 +0000

If you are a React developer and you are using styled-components as a helpful tool, then this article wrote for you!

As usual, you might create a styled-component and import it in other components then use it.
But what if you want to change some styles of your component on different pages? Or different components?
You can always use props for styled-components to change some properties. Right? Like this picture.

Another way is that export css from styled-components and use it in the body of the component.
The css function returns a string of passed styles. These styles are autoperfixed for cross-browser styles.
Like this picture.

But these are not enough for me! I want more extendable components.
I don’t know if you knew it, but the styled accepts both object and string for styles.
So this example should be okay. Right?

So we conclude there are more ways of extending styles of a styled-components!
Now we can be creative and use it to extend our components and create components that can be styled in any way!

For example, we can use a specific prop for extending our components.
And if you are using Typescript in your projects, you can control the value of that prop.
Like this picture.

In the above picture, we specified a prop named styles. Using React.CSSProperties we can control the value to only valid CSS properties. That helps us to avoid crashing the app.

I hope this article helps you create beautiful UI components using styled-components.
I would be happy if you comment to me your opinion.

Forem: Hossein Rahimi

Extend usage of styled-components in React