reactjs - 使用 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/customization/themes/#nesting-the-theme

可以在此处找到处理主题嵌套的代码:

• 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 覆盖将完全替换 outerTheme 覆盖。

但是，您可以通过向 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。