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.

My mission was to do heavy 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.