I am creating a plugin that uses a React App to run inside the admin section of WordPress, and this app uses React Material UI (MUI) as well.

Everything is great, until I started to use “form” components (such as TextField) and this is when load-styles.php started to interfere with the outcome of those files.

After further investigation, it appears like load-styles.php is taking precedence over the styles generated by the MUI as you can see in the picture below:

So, I tried different solutions

First, I tried disabling the styles as described here and here but this causes ALL styles for the admin area to disappear, which is not good. I only do not want the form styles to be disabled

Then I tried to enqueue and reset the styles I wanted to target by giving them the !important keyword, just like this:

input {
    padding: 0 !important;
    line-height: normal !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: medium none currentColor !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: inherit !important;
}

But this would cause a problem, because now the default MUI styles are also overridden (because !important works on them as well), causing the look to be all messed up.

Then, I tried many other solutions, all of them revolve around styling components, but just like point #2 above, they end up messing up MUI default styling

Moreover, Someone had a similar problem but no answer to him/her yet, and the suggestion in the comments to use <CssBaseline /> did not solve anything.

So, the way I am thinking is as follows:

1. Is there a way to make the MUI inline styles take precedense over load-styles.php?

2. If not, is there a way to disable parts of the load-styles.php ?

3. If not, how do I style the admin area using React MUI?

Thanks you.