Add Theme UI to a Gatsby Site using gatsby-plugin-theme-ui and theme-ui
Theme UI is a library for building consistent, themeable React apps based on constraint-based design principles. It allows you to style any component in your application with typographic, color, and layout values defined in a shared theme object.
For this lesson, install the alpha versions of gatsby-plugin-theme-ui and theme-ui.: theme-ui@0.40-alpha.3 and gatsby-plugin-theme-ui@0.4.0-alpha.3.
Add styles to the layout component using the sx prop. Then install the @theme-ui/presets package and pass a preset in your gatsby-config file.
Hi Laurie! Thank you for this great course. I like that It goes straight to the point, very clear and concise. I have a question regarding this particular class. When I try to install Theme-UI I get an error, is it possible that is not yet compatible with Gatsby 3.0? I'm still a begginer so I would appreciate your help! I attach the exact error below:
"While resolving: blog-course-egghead@1.0.0 Found: gatsby@3.0.3 node_modules/gatsby gatsby@"^3.0.1" from the root project
Could not resolve dependency: peer gatsby@"^2.13.1" from gatsby-plugin-theme-ui@0.4.0-alpha.3 node_modules/gatsby-plugin-theme-ui gatsby-plugin-theme-ui@"0.4.0-alpha.3" from the root project"
Thank you in advance!
Hey there! Ya, this is the main challenge with the 3.0 release, not all the plugins have caught up yet!
I'd recommend using resolutions (though you'll need to use yarn as your package manager instead).
In your package.json file you can add the following code:
"resolutions": {
"gatsby": "^3.0.1"
}In the mean time I'll be sure to flag an upgrade in the theme UI repo as well!
The resolutions workaround worked like charm! Thank you!
Glad to hear it! And thanks so much for working through the course and raising this challenge. I have no doubt it will help others.