1

I am trying to use the theme-ui for a new gatsby project I am working on. After following the instructions on the theme-ui documentation, I am still unable to get theming to work properly. The sx props doesn't seem to have access to the theme object create at /src/gatsby-theme-ui/index.js. Thanks in advance.

This is a bug-repo created for reproduction. https://github.com/mujeex/embsy-bug-repo

mbappai
  • 557
  • 1
  • 5
  • 22
  • Can you point to a specific file in the repo? Looks like an untouched default starter at [the current commit](https://github.com/mujeex/embsy-bug-repo/commit/b17b87742561c113ed8125bc5b299500325e85bc). Could you also post a code snippet of your use of the sx prop? – Robin Métral May 11 '20 at 10:05
  • Thank you for pointing that out, turns out I forgot to commit the latest change to the project which has the issue. It's there now; if you could check the **header.js** file inside the components folder, you will find the **sx** props usage – mbappai May 11 '20 at 10:15
  • I'm running your repo locally and the theme seems to be perfectly set up. Which particular aspect is causing issues on your end? For example, if you were wondering about the title not having the color `primary`, that's because you have [this rule](https://github.com/mujeex/embsy-bug-repo/blob/0dc12de4f11baa1617f1fe12fc0017ae6e3284e9/src/components/header.js#L35) directly targeted on the `a` element that makes it white instead (check out [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)). You can see the theme value has been overridden if you inspect the element :) – Robin Métral May 11 '20 at 11:44
  • hahah My God! I feel dumb right now. Totally missed that! Thanks a lot. It works now – mbappai May 11 '20 at 11:52
  • Add that in as an answer would you – mbappai May 11 '20 at 11:53
  • Done, happy I could help :) – Robin Métral May 11 '20 at 12:46

1 Answers1

0

I've ran the repo locally and was able to use theme values in the components.

In this case, the Header component is not getting the primary color because the color: white; rule (this line) is targeting the anchor element directly :) You can see the theme value was overridden by inspecting the element in your browser's dev tools.

If you're interested in knowing why this happens, you can read up on CSS specificity.

Robin Métral
  • 3,099
  • 3
  • 17
  • 32