Material-UI React: глобальное переопределение темы для компонента Paper
У меня есть приложение React, созданное с использованием последней библиотеки компонентов Material-UI.
Я использую много экземпляров компонента Paper. Я хочу применить поля и отступы ко всем сразу, не повторяя этот процесс для каждого экземпляра вручную.
Я просмотрел Документация по Material-UI по этой теме, и, насколько я могу судить, следующий код должен правильно переопределяет внешний вид Paper:
const theme = createMuiTheme({
overrides: {
Paper: {
root: {
padding: '10px',
marginBottom: '10px',
},
},
},
});
Ниже показано, где применяется переопределенный стиль должен:
<ThemeProvider theme = {theme}>
{/* ... */}
<Paper>
Content goes here
</Paper>
{/* ... */}
</ThemeProvider>
Но переопределенные значения не применяются. Есть предложения относительно того, что происходит?
Спасибо!
Ответы 3
в вашем App.js добавить (обратите внимание на MuiPaper, а не на Paper):
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
padding: '10px',
marginBottom: '10px'
},
},
}
});
в том же файле App.js оберните свой HTML:
class App extends Component {
render() {
return (
<MuiThemeProvider theme = {theme}>
<div className = "App">
<YourComponent1 />
<YourComponent2 />
...
</div>
</MuiThemeProvider>
);
}
}
таким образом, любой компонент Paper, отображаемый React, будет иметь ваш CSS.
Кстати, я создал модуль Схемы MUI, который добавляет поддержку пользовательского интерфейса материала, автоматически генерирует несколько компонентов пользовательского интерфейса материала и добавляет общие правила темы в App.js. Приглашаем вас взглянуть / попробовать ...
Я обнаружил проблему.
Имя внутреннего компонента, используемое для CSS, - MuiPaper, а не просто Paper. Следующее дает желаемый результат:
overrides: {
MuiPaper: {
root: {
padding: '10px',
marginBottom: '10px',
},
},
},
Вы также можете использовать свой компонент CssBaseline, если вы уже используете его для глобального сброса ... все зависит от того, как вы структурируете свою тему.
Например, ниже из документов Mui: <CssBaseline.js>
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
html: {
WebkitFontSmoothing: 'auto',
},
},
},
},
});
// ...
return (
<ThemeProvider theme = {theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
Вы можете получить более подробную информацию из документации здесь использование CssBaseline для внедрения глобальных переопределений темы.