using material-ui for react in a wordpress plugin: css specificity problems

Question

Im trying to properly use material-ui for react in a wordpress plugin. Problems arise when using inputs for forms and the styling being overwritten by wordpress own styling in the forms.css file.

Im struggling to find a solution for material-ui writing css that has better specificity than forms.css without having to rewrite the styling(I dont wont my own custom styling for material-ui components: I want to use the default one)

Here is an example(text has been edited for readability(removed selectors that dont matter and styling):

react jsx:

<div id='ad-campaign-edit' style={modalStyle} className={classes.root}>
            <form
                className={classes.form}
                noValidate
                autoComplete='off'
            >
                <TextField
                    id='ad-campaign-name'
                    className={classes.textField}
                    variant='filled'
                    label='Navn på kampanjen'
                />
                <TextField
                    id='ad-campaign-sub-title-text'
                    className={classes.textField}
                    variant='filled'
                    label='Undertekst'
                />
                <TextField
                    id='ad-campaign-sub-price'
                    className={classes.textField}
                    variant='filled'
                    label='Pris'
                />
                <Checkbox
                    defaultChecked
                    className={classes.textField}
                    color='primary'
                    inputProps={{ 'aria-label': 'secondary checkbox' }}
                />
            </form>
        </div>

forms.css(WP):

input[type="text"], {
   ...
}

generated css from material-ui:

.MuiInputBase-input {
   ...
}

other things to note: the css from material-ui is generated after the styling from wordpress in the dom. Looking at the rules for css specificity(ref www.specifishity.com) forms.css is (0-1-1) and material-ui is (0-1-0).

My question is: how can I make material-ui take presedence without having to rewrite all the css with something like the makeStyles hook?(Can I add better specificity to material-ui in general?)

edit: Forgot to add html/jsx edit2: rewrote specificity understanding.

Answer 1

I solved it, it's working but not completely. This solution can be a starting point.

You need to install this npm https://www.npmjs.com/package/jss-increase-specificity

Then you have to create a <StyleProvider> like described here https://material-ui.com/styles/advanced/#jss-plugins

What I did

import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
import increaseSpecificity from 'jss-increase-specificity';


const jss = create({
    plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 1 })],
});

export default function App() {
  return (
    <StylesProvider jss={jss}>
      ...
    </StylesProvider>
  );
}