The CSS of MuiStyles buttons disappears after the refreshing the page - reactjs

I am using material-ui with react, everytime When I refresh the page, the css disappears and it is really hard to get it back. Here is my code in the sandbox
Code in Codesandbox
I am unable to make CSS work, after refresh it disappears.

Related

My recaptcha v3 badge gets hidden behind certain content on my page

My recaptcha badge is being hidden behind only one section of my page. I am using the card component from material ui and thats the section my recaptcha gets stuck behind. Ive tried the z-index but its not working.
I have added an image showing what is happening:
Any one had the same issue??

Distorted UI of the previos arrow on the react-slick

Is anyone facing this issue on the react-slick?
When the page loads, it shows like this but upon interacting with the carousel, it fixes itself.

Whenever I setup react.js and than import any external link (Material UI or Bootstrap React) entire screen get disabled and turned into white?

I have setup my react.js eairler, everytime I import bootstrap related thing (Container, Row, Col, etc) and than put it on the application, the screen turns out to be white.
HTML and CSS get to be completely disabled, web page turn into completely white. What do you think the solution for this problem?
Have you followed the setup guide from react-bootstrap?
https://react-bootstrap.github.io/getting-started/introduction
Also, maybe your browser javascript is disabled, try another browser, and when you inspect the page, do you can see the bootstrap elements?

React Modal Dialog appearing only while inspection

I am new to react and I am using a modal dialog. It is visible when I am inspecting it on browser but not visible generally. What could be the issue?
(Can't paste code since it is work related)
Are you using css z-index at all ? I would use createPortal() approach see the React docs to learn how to do that https://reactjs.org/docs/portals.html

Styled Components Not Initially Working on a Gatsby Project

I have an input field that I have styled with Styled Components. As far as I can tell, everything is fine and it should work without any problems.
However, when I load the page, the input field load with the default browser styles. Only if I make a change to the code will the proper styles show up with hot reloading.
I have made a video showing the problem in case that helps: https://www.loom.com/share/3f9c7a8e7b7a4a85a93332761ea65e2f
In case it is relevant, this is a Gatsby site.
Also, in case it helps -- here is a CodeSandbox link to the project: https://codesandbox.io/s/fresh-cms-version-003-z2724?fontsize=14
Any ideas why this is happening and how to fix it?

Resources