Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default styles.
For example:
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 {
...
}
Noting that material-ui generates its css after wordpress's, where forms.css specificity is (0-1-1) and material-ui is (0-1-0).
How can I ensure material-ui styles take precedence without starting from scratch with makeStyles hook? Is it possible to enhance material-ui's specificity globally?
edit: Forgot to add html/jsx edit2: revised specificity understanding.