React Material UI customization attempt

I received a task to work on a project that used React MUI for the front end. The version 1 was already installed.
This framework is great if you plan to use it as is, maybe with some color customizations.

For example:
• change the hover state of a tab,
• instead of one underline, add a border top on hover,
• change width to be exactly as text content width,
and many other customizations to make it look exactly like the mockup received from UX designer.

For two weeks I had a very hard time figuring out the in and out of the framework structure. I think there should be more examples of how to implement customization overrides.

I managed to make a nav-bar close to the design but every detail was a challenge: the hover state, overriding the base color, changing the font width and caps and otheres that I cant remember right now.

Another complaint I read about and observed is that all styles are in line. If you need to read the markup in the browser it is a pain to figure out what css rule does what.

Over all this is a great framework for using as is, with minimum customizations.

Related posts:

Digital Marketing is one of the most important parts of any company, especially in this day and age. With the increasing advancements in technology and the high integration of digital software’s into…

In my philosophy i don’t need to have a good idea of writing, i just sit down and typing whatever word inside my brain, i save it as draft and one day i’ll come back again, adding some words, and…

As the 2020 Democratic Primary season grinds on, the tribal and philosophical boundaries are becoming increasingly well delineated. The driving narrative of the race, thus far, has been the battle…