Why is sx props unable to access theme object?

Question

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

Answer 1

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.