Вложение темы с помощью Material UI

Question

У меня на сайте много данных, и по большей части они все стилизованы одинаково. Есть несколько разных стилей, которые мне нужно применить к некоторым из них. Я хочу создать глобальную тему для обработки всего на сайте, включая базовые стили для данных, и я также хочу иметь локальную тему, чтобы немного подправить отдельные таблицы данных. Вот что у меня есть.

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 красный) и цвет фона или синий и красный.

Пожалуйста, помогите

Answer 1

Вот соответствующая часть документации:

• https://material -ui.com / настройки / темы / # гнездования-тема

Код, который обрабатывает вложение тем можно найти здесь:

• https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js#L10

Вот текущий код:

// 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.