React Material UI and WordPress Admin Area

Question

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 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.

Answer 1

The fundamental issue is that MUI is probably not meant to be used in an environment where there are already styles like this. It's supposed to be the base layer. The WordPress admin has its own styles and it's highly unusual to try and use a completely different UI framework inside of it.

These types of conflicts are inevitable when you try to use 3rd-party UI frameworks inside the WordPress admin, which was not designed to support them. The same issues occur when people try to use Bootstrap in the WordPress admin.

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

The styles in your screenshot are inline styles, so they are already loading after load-styles.php. The reason they're not taking precedence is because the load-styles.php rules have a higher specificity.

To make your styles take precedence you'd need to increase the specificity of the selectors used by MUI. Whether MUI has tools for that is something you would need to ask them or their community.

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

load-styles.php is just outputting all the styles that have been enqueued with wp_enqeueue_style() in the admin. You can dequeue them with wp_dequeue_style() but you'll need to know the handle used to register the style. Tools like Query Monitor can give you a list of what stylesheets are enqueued, and their handles.

The problem is that the styles you want to remove are probably in a stylesheet with many styles that you don't want to remove, and removing them will probably break parts of the WordPress admin that you still need.

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

This probably isn't a supported use-case for MUI. If it is they should be able to help. If it isn't then your options are limited:

1. Increase the specificity of MUI selectors, if that's even possible.
2. Add your own stylesheet that corrects any broken visuals caused by the conflict. If MUI uses dynamically generated class names, this will be difficult.

Answer 2

I came across this recently. If you specify the same styles as wordpress does, but set the values to inherit, at the same global level then the later CSS rules will take precedence and undo the things the wordpress styles have set. I've added the CSS I ended up with below which does the job for all the material ui components I've used so far.

This does mess the rest of the admin ui up a bit if you include the css on every page, so to work around that I just include the css conditionally:

function my_plugin_admin_scripts() {
    if (strpos($current_screen->base, 'myplugin-slug') === false) {
        return;
    }
    $admin_css = 'build/admin.css';
    wp_enqueue_style(
        'my-plugin-admin',
        plugins_url( $admin_css, __FILE__ ),
        ['wp-components'],
        filemtime( "$dir/$admin_css" )
    );
}
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts', 10 );

This works for my use case, which is to embed extra screens using material ui within the wordpress admin ui.

button,
input,
select,
textarea {
    box-sizing: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input,
textarea {
    font-size: inherit;
}

textarea {
    overflow: inheritauto;
    padding: inherit;
    line-height: inherit;
    resize: inherit;
}

label {
    cursor: inherit;
}

input,
select {
    margin: inherit;
}

textarea.code {
    padding: inherit;
}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
    border: initial;
    padding: initial;
    line-height: initial;
    min-height: initial;
    box-shadow: initial;
    border-radius: initial;
    background-color: initial;
    color: initial;
    // .MuiInput-input {
    //    padding: 4px 0 5px;
    // }
}
// redundant
// input[type="date"],
// input[type="datetime-local"],
// input[type="datetime"],
// input[type="email"],
// input[type="month"],
// input[type="number"],
// input[type="password"],
// input[type="search"],
// input[type="tel"],
// input[type="text"],
// input[type="time"],
// input[type="url"],
// input[type="week"] {
//     padding: initial;
//     line-height: initial;
//     min-height: initial;
// }

input[type="checkbox"],
input[type="radio"] {
    border: initial;
    border-radius: initial;
    background: initial;
    color: initial;
    clear: initial;
    cursor: initial;
    display: initial;
    line-height: initial;
    height: initial;
    margin: initial;
    outline: initial;
    padding: initial;
    text-align: initial;
    vertical-align: initial;
    width: initial;
    min-width: initial;
    box-shadow: initial;
    transition: initial;
}

input[type="color"].MuiInput-input,
input[type="date"].MuiInput-input,
input[type="datetime-local"].MuiInput-input,
input[type="datetime"].MuiInput-input,
input[type="email"].MuiInput-input,
input[type="month"].MuiInput-input,
input[type="number"].MuiInput-input,
input[type="password"].MuiInput-input,
input[type="search"].MuiInput-input,
input[type="tel"].MuiInput-input,
input[type="text"].MuiInput-input,
input[type="time"].MuiInput-input,
input[type="url"].MuiInput-input,
input[type="week"].MuiInput-input,
input[type="checkbox"].MuiInput-input,
input[type="radio"].MuiInput-input,
select.MuiInput-input,
textarea.MuiInput-input {
    padding: 4px 0 5px;
}

// input.MuiInput-input {
//     padding: 4px 0 5px;
// }
div.MuiInputBase-root {
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4375em;
    letter-spacing: 0.00938em;
    color: rgba(0, 0, 0, 0.87);
    cursor: text;
}
button.MuiPickersDay-root {
    line-height: initial;
}

input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=radio]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
    border-color: initial;
    box-shadow: initial;
    outline: initial;
}

input[type=radio]:checked+label:before {
    color: initial;
}

input[type=radio] {
    border-radius: initial;
    margin-right: initial;
    line-height: initial;
}

input[type=checkbox]:checked::before,
input[type=radio]:checked::before {
    float: initial;
    display: inline-initial;
    vertical-align: initial;
    width: initial;
    speak: initial;
    // -webkit-font-smoothing: antialiased;
    // -moz-osx-font-smoothing: grayscale
}

input[type=checkbox]:checked::before {
    content: initial;
    margin: initial;
    height: initial;
    width: initial;
}

input[type=radio]:checked::before {
    content: initial;
    border-radius:initial;
    width: initial;
    height: initial;
    margin: initial;
    background-color: initial;
    line-height: initial;
}

input.readonly,
input[readonly],
textarea.readonly,
textarea[readonly] {
    background-color: initial;
}
input.disabled,
input:disabled,
select.disabled,
select:disabled,
textarea.disabled,
textarea:disabled {
    background: initial;
    border-color: initial;
    box-shadow: initial;
    color: initial;
}

input[type=file].disabled,
input[type=file]:disabled,
input[type=range].disabled,
input[type=range]:disabled {
    background: initial;
    box-shadow: initial;
    cursor: initial;
}

input[type=checkbox].disabled,
input[type=checkbox].disabled:checked:before,
input[type=checkbox]:disabled,
input[type=checkbox]:disabled:checked:before,
input[type=radio].disabled,
input[type=radio].disabled:checked:before,
input[type=radio]:disabled,
input[type=radio]:disabled:checked:before {
    opacity: initial;
}

.z-alert,
.notistack-SnackbarContainer .z-alert
 {
    z-index: 10000;
}

Answer 3

I have similar issue when I was working on Rect part of the plugin.

It finally worked for me, with CSS code included via admin_enqueue_scripts https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/

I put my object inside div, with custom name, and then I referred to for example input like this:

<div class="my_div">
    <form class="my_div__form">
        <input type="text" class="my_div__input" />
    </form>
</div>

and with that code I used this CSS:

.my_div .my_div__input {
    // Styles here
}

I used BEM formatting and SCSS, but this is not relevant, and you can achieve this without those.

If you do not have power over structure of the elements, I'm not sure if this is possible without !important, at least I was not able to find other solution.