material ui - How to enforce MUI styling, if it is being overwritten by a global setting?

Question

I am working on a React Component, something like a Quiz, that will be inserted into a client's webpage. I obviously don't have any say in their website's stylesheet and can't do anything about it, it is what it is. So I am wondering if there is a way to enforce the Material UI on MUI components?

Examples:

This is my development build.

And this is inside the production build, on my client's website. They have a global setting, that is overwriting this one. Specifically they are targeting input[type="email"], which is causing me troubles.

So I am asking here if there is a way for it to enforce MUI styling.

question from:https://stackoverflow.com/questions/66067752/how-to-enforce-mui-styling-if-it-is-being-overwritten-by-a-global-setting

Answer 1

Add a className props to your Material UI inputs let's say className="email-input" then create a css file add that className and to add to it the height, width and other styles you want, just like how you would do styling in normal html file then import it in your react component file.

When you add your project to your client's site the css file will be loaded after their site's css, so your styles will override theirs.

Happy Hacking!