Избегайте конфликтующих текстовых полей в MUI в wordpress
Привет, я новичок в Material UI и React. Пытаюсь создать один плагин для wordpress. Часть администратора я создаю текстовое поле, используя реакцию MUI. Поле ввода и отступы текстового поля влияют по умолчанию на wordpess load-style.css.
<TextField label="Role or Title" classes={classes.uniqueclass} placeholder="Developer" fullWidth />
В провайдере темы:
MuiInput: {
root: {
top: [theme.spacing(2),'!important'],
bottom: theme.spacing(0),
border: ["none",'!important'],
outline: `1px solid transparent`,
background: "transparent",
padding: theme.spacing(0),
marginBottom: theme.spacing(4),
'&$focused': {
borderColor: theme.palette.primary.main,
},
},
По умолчанию wordpress загружается как,
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: #2271b1;
box-shadow: 0 0 0 1px #2271b1;
outline: 2px solid transparent;
}
Итак, как перезаписать это глобально для всего текста и полей выбора. заранее спасибо