CSS Styled Components Tutorial

Styled components are becoming very popular these days. The majority of projects are built using react.js by using the library. Styled components have made working using CSS very easy and fun, even while using JavaScript.

However, everything requires practice, especially when you want to become a master in it. Let's go and brief some of the fundamentals of styled-components in CSS.

1. Workspace and HTML

The first step is that we need to set up our workspace. Keeping aside the styled-components, we are required to use two additional libraries. We will use CDN to obtain both of them as well as the library for styled-components. These libraries are, namely, React.js and React-DOM for getting both and the Babel transpiler.

Secondly, we must prepare the HTML document where we will render our react to JS components. It will be a very quick and simple procedure since our code will be running in JavaScript or React.JS. All else required is one div element. We will be using this element as a placeholder for rendering our react components.

2. JavaScript, React.js, and Styled components

We can now finally start playing with styled-components. As mentioned in the beginning, there will be starting with the basic stuff. When there is nothing very difficult about styled-components or CSS, let’s start with the basics and create a few typography styles for headings and body text by utilizing font weight and font size.

3. Bringing in more modularity

As we have seen in the example above, working with science components will be like working with Manila CSS. A bit of time for remembering a different way for defining styles may be required, such as const.

Whenever our code is concise, like this case, nevertheless, we could write our code in a better and more modular way if we define a new concept and set its front way to bold and then utilize each heading style variable. If something happens, we can decide what to change the font-weight, and we need to change it in just one place.

This change will be very easy and fast and will require to import one more additional method from the styles component library. This method is defined and exported for a styled component library that has CSS. We will not change the second line by using styled-components import and include the CSS method. Always remember that CSS is written in lowercase.

4. Extending styled-components

We now know how to create new components by using specific styles through variables using styled-components. We want to have one variable with particular types and use it for both members and extend techniques of other features.

All we need to do is define a new variable for some component. Then we will be adding some styles to make this button look better. After that, we will create another variable or another control that will inherit the first one's styles while having its own.

One more thing is that we are not required to import any additional method from the styled-components library as we did in CSS. We are required to import the style components, and utilizations extends as we want.

Other useful articles: