The Only Guide to Styled-Components You Will Need

All important features in one article

Source: blog.logrocket.com

Do you want to learn styled-components?

Then you’ve come to the right place — in this article we will go through all the features you need to know without any prior knowledge.
Here is the overview of the topics we are going through:

Let’s go!

Installation & Basic Styling

styled-components can be installed via NPM like almost everything else you need to develop with React.js.

npm install styled-components or yarn add styled-components

Then we can import the library into React.js, and create our first styled component, which we do by calling the function. As parameters in the backticks, we pass the individual styles, as we know them from CSS.

It was that easy to create a component — and save it in the variable Headline.

styled.h1 indicates that we want to use an H1 tag as an HTML element. So our headline component is now an H1 with the CSS properties we passed in the backticks.