Вложение темы с интерфейсом материала
У меня есть много таблиц данных на моем веб-сайте, и по большей части все они оформлены одинаково. Есть несколько разных стилей, которые мне нужно применить к некоторым из них. Я хочу создать глобальную тему для обработки всего на сайте, включая основные стили таблиц данных, и я также хочу иметь локальную тему для небольшой настройки отдельных таблиц данных. Вот что у меня есть.
https://codesandbox.io/embed/jolly-antonelli-fg1y1
Это такая структура
<Test>
<PrimaryThemeHere> //All have Border 1px red
<TestChild>
<SecondaryThemeHere> //blue background
<Datatable />
</SecondaryThemeHere>
</TestChild>
<TestChild2>
<SecondaryThemeHere> //Red background
<Datatable />
</SecondaryThemeHere>
<TestChild2>
</PrimaryThemeHere>
</Test>
Основная тема выглядит так:
const theme = createMuiTheme({
overrides: {
MuiTableBody: {
root: {
border: "1px solid red"
}
},
MuiTableCell: {
root: {
border: "1px solid red"
}
}
}
});
и вложенная тема выглядит так:
getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiTableRow: {
root: {
backgroundColor: "blue"
}
}
}
});
Я никогда не могу заставить красную рамку отображаться рядом с цветом фона. Он всегда выбирает одно или другое. Как я могу получить комбинацию начальной основной темы (граница 1px красная) и цвет фона или синий и красный.
Пожалуйста помоги
Ответы 1
Вот соответствующая часть документации:
Код, который обрабатывает вложение тем, можно найти здесь:
Вот текущий код:
// To support composition of theme.
function mergeOuterLocalTheme(outerTheme, localTheme) {
if (typeof localTheme === 'function') {
const mergedTheme = localTheme(outerTheme);
warning(
mergedTheme,
[
'Material-UI: you should return an object from your theme function, i.e.',
'<ThemeProvider theme = {() => ({})} />',
].join('\n'),
);
return mergedTheme;
}
return { ...outerTheme, ...localTheme };
}
Обратите внимание, что последняя строка (return { ...outerTheme, ...localTheme };) выполняет поверхностное слияние двух тем. Поскольку в обеих ваших темах указано свойство overrides, переопределения localTheme полностью заменят переопределения externalTheme.
Однако вы можете выполнить более сложное слияние двух тем, предоставив функцию ThemeProvider. Например, TestChild может выглядеть так:
import React, { Component } from "react";
import { MuiThemeProvider } from "@material-ui/core/styles";
import MUIDataTable from "mui-datatables";
const localTheme = {
overrides: {
MuiTableRow: {
root: {
backgroundColor: "blue"
}
}
}
};
const themeMerge = outerTheme => {
// Shallow copy of outerTheme
const newTheme = { ...outerTheme };
if (!newTheme.overrides) {
newTheme.overrides = localTheme.overrides;
} else {
// Merge the overrides. If you have the same overrides key
// in both (e.g. MuiTableRow), then this would need to be
// more sophisticated and you would probably want to use
// a deepMerge function from some other package to handle this step.
newTheme.overrides = { ...newTheme.overrides, ...localTheme.overrides };
}
return newTheme;
};
class TestChild extends Component {
render() {
const columns = [
{
name: "Message"
},
{
name: "Date"
},
{
name: "Dismiss"
}
];
const data = [["test", "15/01/19", "", ""], ["test", "15/01/19", "", ""]];
let options = {
filterType: "dropdown",
responsive: "stacked",
print: false,
search: false,
download: false,
selectableRows: "none"
};
return (
<div>
<MuiThemeProvider theme = {themeMerge}>
<MUIDataTable
title = {"Test"}
data = {data}
columns = {columns}
options = {options}
/>
</MuiThemeProvider>
</div>
);
}
}
export default TestChild;
В моей версии вашей песочницы я исправил только TestChild2.js.