After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected.
The majority of the styling from Material UI is intact, but there are a few discrepancies that caught my attention.
Example 1:
https://i.sstatic.net/mJPs9.png
In the example above, the LOGIN button should be an orange outlined button, while the SIGN UP button should be a contained orange button with some space in between. Here's how it looks during development:
https://i.sstatic.net/9tOPu.png
Example 2 - Missing Margins:
In this scenario, there should be margins between the menu items, but they aren't appearing as intended.
https://i.sstatic.net/etNpn.png
Example 3:
Additionally, when inspecting the elements in dev tools, it seems like my custom styles are being ignored (except for the width: 70% property), and default MUI styling is taking over instead.
https://i.sstatic.net/Zt2os.png
I've tested this on Chrome, Edge, and Safari browsers, all yielding the same results.
Despite searching online, I couldn't find any helpful resources to solve this issue.
If you require more information, please feel free to ask, as I'm unsure what else could assist in troubleshooting.
Any guidance or assistance would be greatly appreciated.