theme-ui | Build consistent , themeable React apps | Frontend Framework library

My question is similar to this one and I understand that I need to add an id to my navbar link and add an event listener on componentDidMount (with the handleScroll function), this is clear to me already.

I will apologize beforehand because I might be asking something stupid or something I was supposed to know already.

The issue is, even though I am experienced with vanilla JS, I am pretty new to react and gatsby so I am not sure exactly where to place componentDidMount at the gatsby starter I am using.

This starter is a single page app, all the sections are loaded in the index (home page). One of these sections for instance is named About and I would like to add componentDidMount in there. I have shadowed the about.tsx file to the components directory but I am not sure where to place componentDidMount.

about.tsx content:

• I am using @smakosh's GatsbyJS theme and Theme UI plugin;
• I learned to use Hooks' useColorMode from Hooks - useThemeUI and useColorMode;
• My whole code is totally correct;
• I have already cleared the caches of GatsbyJS, npm and browser, but the same errors still persist;
• You can get my small package to analyse: https://drive.google.com/file/d/1SsgPXAq9zMv8Yp4XDjy3MJLeWun-J3UQ/view?usp=sharing.

After compiling, I received two errors:

• TypeError: setMode is not a function;
• InvalidCharacterError: String contains an invalid character:

Check my whole code:

I'm using @theme-ui/prism to format code block text in markdown files. The markdown plugin im using is gatsby-plugin-mdx. It doesn't seem to be working because I don't get the dark background in the code block.

Here's what I did:

I want to include Theme UI's presets in my GatsbyJS for switching the mode (dark and light) and the themes.

I can't modify export of my original code to merge two const functions into an export, because export needs children to be defined. I will not want to use children, because another layout file in JSX has already children. I also can't merge a const into another const. You will check the errors at the end. I'll share my repo's small folder at the end for you to test. The In Angular2+ is there any way to extends on inherit const into another const? does not help either.

See my small original code, and notice const and export:

I have setup and published to a private server a StoryBook design system using ThemeUI that contains components. One such component is the button shown below.

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

While I have css rules with background-cover that work well in Chrome for Android, somehow the very same rules fail in this particular website

The weird thing is that if I paste the same background-image: url(backgrounds/landing-two.jpg); rule on the Dev Tools, it doesn't work, but if I uncheck it (leaving the original one) then I can see the original rule working

The site is https://kuworking-theme-landing-two.netlify.com/

What can be happening?

I am learning unit testing and trying to check if the login is valid on the HomePage and if so that the SuccessPage is rendered but it is giving me an AssertionFailedError

.java:

I am busy with a wicket application and need to do unit testing, and I have a login page that validates inputs from a List but I have no idea where to start, I did try something but it gave me errors and just have no clue what I am doing any help is appreciated

Homepage.java