Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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:

enter image description here
This is my development build.

enter image description here
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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...