在 Material-UI 中的自定义主题上设置组件 z-index

Question

我正在尝试在 Material-UI 中的自定义主题上设置组件的 z-index。他们在 0.14.2 版本中将 zIndex 从基本主题中移出，取而代之的是在名为 zIndex.js 的节点模块中设置 zIndex。我想在我的组件中覆盖 zIndex 但找不到一种方法来做到这一点而不改变节点模块本身，这是一个坏主意。我在一个单独的页面中设置了一个自定义主题，如下所示

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: "#303F9F",
        primary2Color: "#3F51B5",
        primary3Color: "#C5CAE9",
        accent1Color: "#448AFF",
        accent2Color: "#ED2B2B",
        accent3Color: "#F58C8C",
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500
    }
};

然后我app.jsx像这样使用它（为简洁起见缩短了代码）

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import MyRawTheme from '../theme/customTheme.js';

class App extends React.Component {
    constructor() {
        this.state = {
            appConfig: MainStore.appConfig
        }
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyRawTheme)
        };
    }

App.childContextTypes = {
    muiTheme: React.PropTypes.object
};

虽然这适用于设置自定义颜色，但我不确定如何设置自定义 zIndex。

我尝试创建自己的 zIndex.js 并像这样导入

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from './zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: "#303F9F",
        primary2Color: "#3F51B5",
        primary3Color: "#C5CAE9",
        accent1Color: "#448AFF",
        accent2Color: "#ED2B2B",
        accent3Color: "#F58C8C",
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

以及像这样将它作为一个对象包含在内

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';

export default {
    spacing: Spacing,
    zIndex: {
        menu: 1000,
        appBar: 1100,
        leftNavOverlay: 1200,
        leftNav: 1300,
        dialogOverlay: 1400,
        dialog: 1500,
        layer: 2000,
        popover: 5000,
        snackbar: 2900,
        tooltip: 3000
    },
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: "#303F9F",
        primary2Color: "#3F51B5",
        primary3Color: "#C5CAE9",
        accent1Color: "#448AFF",
        accent2Color: "#ED2B2B",
        accent3Color: "#F58C8C",
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

两者都不起作用。它总是使用来自节点模块的 zIndex 值，即使它没有被导入到自定义主题页面中。我已经问过 material-ui repo 并被定向到这个页面，这对我没有帮助http://www.material-ui.com/#/get-started/server-rendering

有人知道如何在不更改节点模块本身的情况下更改 zIndex 吗？

Answer 1

（解决方案）：昨天一整天都在与此斗争并最终在此处发帖后，我想出了如何覆盖自定义主题中组件的 zIndex。希望这对其他人有帮助。自定义主题时，您可以在 getMuiTheme 方法中包含第二个参数。这在任何地方的 Material-UI 文档中都没有提到。在 app.jsx 或任何您想要覆盖 zIndex 的组件中，您可以像这样更改它（为简洁起见，缩短了代码）

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import MyRawTheme from '../theme/customTheme.js';
let zIndex = {
    zIndex: {
        popover: 5001,
        layer: 5000
    }
};

class App extends React.Component {
    constructor() {
        this.state = {
            appConfig: MainStore.appConfig
        }
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyRawTheme, zIndex)
        };
    }

我正在我的主要 app.jsx 组件中进行更改，因为我希望这些更改在我的所有其他组件中生效，但我相信您也可以在单个组件级别进行这些更改，而无需将它们应用于所有组件。如果您查看 lib/styles/zIndex.js 下的 material-ui 节点模块，您将找到可以通过这种方式更改的组件 zIndex 的列表。它看起来像这样

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  menu: 1000,
  appBar: 1100,
  leftNavOverlay: 1200,
  leftNav: 1300,
  dialogOverlay: 1400,
  dialog: 1500,
  layer: 2000,
  popover: 2100,
  snackbar: 2900,
  tooltip: 3000
};
module.exports = exports['default'];

因此，正如您从我的示例中看到的，我只是更改了 app.jsx 组件中的 popover 和 layer zIndex。