menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Anyone has used css variables and media queries with styled components in…

February 24, 2020 at 11:55am

Anyone has used css variables and media queries with styled components in gatsby? How do you achieve this? Thanks

February 24, 2020 at 11:55am

February 24, 2020 at 2:34pm
Haven't used media queries yet in my project(will do very soon) but I used variables and it was quite straight forward.
  • reply
  • like
I added for example --primary-color: red; in :root{} you can either put it in the css file but I put it createGlobalStyled and used it in layout.js, then wherever you want just use for examole color: var(--primary-color);
Edited
  • reply
  • like
Thanks , i used createGlobalStyle and it worked! Thanks again. I will try media queries too. if i can get it working, I will post the solution here. Cheers :)
  • reply
  • like

February 25, 2020 at 2:49am
Hi , i added media queries to individual components and it managed to achieve responsive design. demo. hope my working demo helps. i was wondering if we can centralize media queries in styled components so we got a central point of control for different screen sizes or we need to repeat media queries in each component for different screen sizes?
  • reply
  • like