Next, we should add the two sections into the container component. That's about it for the container component for now. Instead of doing maxWidth, we can do maxW, and then just P, in this case. The style props also have shorthand names. Since the container component is empty right now, we can't see its effect until we add more elements to it. The container component by default has a padding of 16 pixels, and we don't want that in our case. In order to set the size to 1,280 pixels of the container component, we can do maxWidth = container.xl. We can see that there's a container section and there's an XL value of 1,280. Enter the default theme section and scroll down to the sizes section. Let's see what design token we need to use. In our case, we need to set the width of the container to 1,280 pixels. These style props are well documented and can be checked out on the Chakra UI website. Under the hood, these style props are compiled to CSS properties. We can use style props to access those design tokens that are part of Chakra UI. Chakra UI has its own implemented design system and every design system has designed tokens, which are colors, spacing units, fonts, sizes, etc. Before we do that, I'll briefly explain Chakra UI's design system.
The container component by itself has some default parameters, but we would like to overwrite them. We're going to import the container component from Chakra UI/react and add it into our index page. Let's switch to the index.tsx file and add an import statement at the top. Let's add the container component in our index.tsx file. In Chakra UI, we can use the container component to achieve the same. They represent two columns with 640 pixels each, totaling at 1,280 pixels. These are the margins that keep our content contained and centered. First, we'll focus on these two red lines. Just by looking at it, we can immediately see that we have two types of fonts, a few inputs, a checkbox, a button, an image, etc. Lazar Nikolov: Throughout this course, we'll be building this user interface.
0 kommentar(er)
