Неизвестно, я не уверен, сколько разных компонентов имеют "выделенный" вариант.Вы не сможете обратиться ко всем из них в одном правиле CSS, но каждый из них может быть рассмотрен отдельно в вашей теме.
В этом ответе я просто рассмотрю OutlinedInput и выделю Button,Если у вас есть вопросы о переопределении стилей для других компонентов, создайте более конкретный вопрос, показывающий, что вы пытались.
Документация по настройке всех экземпляров типа компонента находится здесь: https://material -ui.com / customization / themes / # customizing-all-instances-of-a-component-type .
Следующий ресурс - просмотреть CSS-часть документации API для компонента, который вы хотите использовать.переопределения.Например, документация Button находится здесь: https://material -ui.com / api / button / # css .
В нижней части документации CSS будет строка, похожая нав Button:
Если вы используете клавишу overrides темы, вам нужно использовать следующее имя таблицы стилей: MuiButton.
Аналогичновот ссылка для OutlinedInput: https://material -ui.com / api / outlined-input / # css
Для некоторых настроек вам может понадобиться посмотреть, какстили по умолчанию определены в исходном коде, чтобы понять, как правильно их переопределить.
Вот пример, показывающий настройки OutlinedInput и Button.Я также включил не обрисованные в общих чертах версии, чтобы показать, что на них не влияют настройки в теме.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiOutlinedInput: {
root: {
"& $notchedOutline": {
borderColor: "green"
},
"&$focused $notchedOutline": {
borderColor: "orange"
},
color: "purple"
},
notchedOutline: {}
},
MuiButton: {
outlined: {
borderColor: "purple",
color: "red"
},
outlinedPrimary: {
borderColor: "brown"
}
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<TextField variant="outlined" defaultValue="My Text" />
<br />
<br />
<TextField defaultValue="Not customized" />
<br />
<br />
<Button variant="outlined">Outlined Button</Button>
<br />
<br />
<Button color="primary" variant="outlined">
Outlined Button - Primary
</Button>
<br />
<br />
<Button>
Text Button - unaffected by customization to outlined button
</Button>
</MuiThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Соответствующий ответ: Изменить схему для OutlinedInput с React material-ui