How to Define Styled Components in React

[00:00 - 00:16] Prepare the styled components. We'll begin by creating a bunch of styled components so that our application looks good from step one. First, install the styled components library. Yarn, add, styled components. I'm gonna use the specific version 5 to 1.

[00:17 - 00:37] Inside of the SRC folder, create a new file, styles.ts, and here try to import styled from styled components. Oh, and you will get TypeScript error. Let's see what it says. It says that it couldn't find a declaration file for the module styled components.

[00:38 - 00:54] TypeScript errors can be quite worthy, but usually the most valuable information is located closer to the end of the message. To fix this particular issue, we will need to install the missing types. Yarn, add, add types, styled components, 5, 1, 9.

[00:55 - 01:11] A lot of issues related to missing types can be fixed by installing a package starting with add types prefix and then the name of the package you're trying to use. Let's look at the app and decide what styled components will be defined. So here we have an app container. It will help us to arrange their columns horizontally.

[01:12 - 01:20] It is going to wrap the whole application. Then we have the column container. It is a visual representation of a column. It will have gray background and rounded corners.

[01:21 - 01:36] Inside of the columns, there will be a column title. It will make the column title bold and add pairings to it. And we'll also have a card container. This component will visually represent the card. Go back to the styles.ts, and let's start with the app container.

[01:37 - 02:04] Expert, const, app, container equals styled div. The syntax that we are using here is nothing related to TypeScript. It's actually basic JavaScript where you can pass template strings as arguments directly without using the brackets. Let's add the styles. This component is responsible for aligning their columns horizontally. So it will have display, flex, and align items, flex, start.

[02:05 - 02:33] So that the arrangement of items starts from the left side. We set the background color to be blue, set the flex direction to roll, and make this element to take 100% height and width. Then we add a little bit of padding. 20 pixels is enough. Style component functions, except strings with CSS rules. And it's very convenient because instead of passing the object properties where we have to rename each property to a camel case, we don't need to do it here.

[02:34 - 02:44] It is basically just regular CSS styles that you would use in your CSS files. Let's proceed and define the styles for the columns. Expert, const, column, container.

[02:45 - 03:01] It's another styled div. It should have static width, 300 pixels, and flex row, zero. It also has a bit of padding and a small border radius. Each of the columns will have margin right, 20 pixels. And just in case, we also defined the minimum height of each column. It should be 40 pixels.

[03:02 - 03:27] Define the column title. Expert, const, column, title. It is also going to be a div, styled div, with padding. 6px, 16, and 12. Define the font weight as bold. Now let's define the styles for the cards. There is going to be only one styled components needed here. Expert, const, card, container. It's going to be a styled div with background color.

[03:28 - 03:56] White, cursor, pointer, small margin, bottom, a bit of a padding. It should also have max width, similar to the width of the columns, border radius, and a box shadow. If you want, you can copy the styles from the attached code example. Now go to SRC AppTSX and render everything together. So in our app, we'll now render an app container. Inside of it, we'll have a column container, where we'll have column title, saying to do.

[03:57 - 04:15] And three card containers. The first one should say first, item, the second one should be second, item, and the third, third item. Launch the app, yarn, start. React should open your app in the browser automatically if it doesn't happen. Navigate to the URL suggested in the console.

[04:16 - 04:22] Here you should see a column saying to do with three cards. First item, second item, and third item.