The Only Guide to Styled-Components You Will Need

All important features in one article

Louis Petrik
Oct 23, 2020 · 4 min read
styled components introduction
styled components introduction
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.

styled-components basic styling
styled-components basic styling

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.

Inside the back-ticks, we write the CSS code exactly as we would write it in a CSS file or style-tag — mind line breaks and semicolon.

vscode-styled-components is a great extension for VS Code

As an example we can combine a few styles — it works just like in normal CSS.

styled-components in react.js
styled-components in react.js

Extending Styles

To transfer styles from one styled component to another, you can also nest the components — e.g. the headline in a div.

In the following example, we connect both components, then the H1 tag will appear green.

extending styles with styled-components
extending styles with styled-components

But we can also use an existing styled component to enhance another one in its styling.

For this, we simply pass the component we want to extend the other one as parameter. In the example, the Headline-component becomes red AND italic.

styled-components passing styles
styled-components passing styles

Styled Components & Props

Props in React.js are one of the most important and powerful concepts — they make our applications much easier and more dynamic.

We can also use them in styled-components, e.g. to display CSS-styles based on certain conditions. Inside the backticks, in JavaScript, we can most elegantly pass the $ sign to dynamic code, and thus return as CSS value something from JavaScript.

In the example we do this with a props named color. The value of the props becomes the value of the CSS property.

styled-components react props
styled-components react props

This is pretty cool, but we can also work with conditionals.

For this we use the JavaScript if-else-shorthand-syntax. If props.show is true then visible is used as CSS value, otherwise the JS code returns hidden.

ternary props styled components
ternary props styled components

Themes

To make styling a little easier and to make us repeat ourselves less often, there are themes that we can define and use.

We build in a theme by nesting our code in the ThemeProvider, which will get the corresponding theme as props. We can save the theme itself as a simple object.

themes in styled-components
themes in styled-components

Advanced

The following is one of my favorite features in styled-components — we can connect components and react when something happens to another component. For example a hover event.

Therefore we simply add another component to our styling, and define for which event we want to do something.

However, the components must be nested. In the example the text-component is inside the wrapper, when the wrapper is hovered, the color of the text changes.

on hover styled-components
on hover styled-components

With styled-components we can even style existing components, which are e.g. provided by some library, afterwards.

This basically applies to all React.js components that get their classNames via props.

styling existing components with styled-components
styling existing components with styled-components

Maybe you don’t like the backtick-syntax of styled-components so much — then you can use an object-syntax that is supported as well.

You may know it from React Native.
It is important to note that we can no longer write exact CSS code, but have to do without hyphens. Instead of hyphens we use Camel-Case, so we capitalize the following word. font-family becomes fontFamily.

style-object in styled-components
style-object in styled-components

That’s it — thank you for reading, I hope this article helped you to understand styled-components.

Originally published at https://codingcheats.io on October 23, 2020.

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store