The Only Guide to Styled-Components You Will Need
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:
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.
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.
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.
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 & Props
Props in React.js are one of the most important and powerful concepts — they make our applications much easier and more dynamic.
In the example we do this with a props named color. The value of the props becomes the value of the CSS property.
This is pretty cool, but we can also work with conditionals.
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.
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.
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.
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.
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.