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.
css function returns a string of passed styles. These styles are autoperfixed for cross-browser styles.
Like this picture.
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!
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.