Add pre-built Chakra UI components to a Gatsby app

Create persisted navigation for a page layout in a Gatsby app

Use Chakra UI style props with React components to make a clean layout design

Generate a visually editable GraphQL API with Hasura, deployed to Heroku

Provision an Auth0 app and add authentication to an app with a custom Gatsby plugin

Connect newly registered users from Auth0 to Hasura and add authorization roles

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

Chakra UI provides style props which "save time by providing helpful shorthand ways to style components". They reference design tokens from your theme and let you style components with CSS like style props that are mainly borrowed from [styled-system](https://styled-system.com/).

Additional resources:

- [Styled System property shorthand list](https://styled-system.com/api/)
- [Chakra UI style props](https://chakra-ui.com/style-props)

https://app.egghead.io/api/v1/lessons/react-use-chakra-ui-style-props-with-react-components-to-make-a-clean-layout-design/subtitles

Kyle Gill: [0:00] To improve the style and layout of this page, Chakra UI provides style props that can be passed into each component to style the element with Chakra's theme, which is based on Tailwind CSS's theme.

[0:10] Starting in the layout file, add grid template rows to the main grid element with 64 pixels for the top row or header row, and the remaining rows to auto in order to automatically resize themselves to fill available space.

[0:23] Give a minimum height of 100 percent of viewport's height, so the layout fills the whole browser. Notice the camel casing of the properties to follow React's conventions rather than kebab case, which uses dashes and lowercase like CSS properties would usually use.

[0:42] You can add a justified property to Chakra elements to add both justify-content and justify-items CSS properties. Adding center will send the elements in the middle of the page. Then in the footer, add both align and justify-center to center the content both horizontally and vertically.

[1:01] Adding a color prop will refer to Chakra's theme, which you can refer to on the docs. In this case, I'm using the 400 shade of gray, which will appear lighter than the other text.

[1:12] Now to style the elements in the header, add align-center and justify space between to the main flex element. The padding prop will also refer to Chakra's theme like the colors. In this case, using the fourth token in the spacing scale, the larger the token, the larger the size of the space.

[1:31] You can pass a variant prop into the buttons to tell them to render a different kind of button. In this case, the ghost variant, which will show a color when hovered.

[1:44] For button that you want to be filled in, you can use the solid variant and define the color with the variant color prop, like for the signup button.

[1:53] Instead of using a flex component to wrap these buttons, we can swap it out for a stack component that will allow us to apply spacing between each element through a single prop. Import the Stack component from Chakra UI and replace the flex component wrapping the buttons with it.

[2:08] With the is inline prop, did you know that the buttons run horizontally instead of vertically? Give it a spacing prop of three, which is third in the spacing scale. All these styles make the page a little more presentable.

Use Chakra UI style props with React components to make a clean layout design

Share this video with your friends

Course

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0