在Material-UI中的自定义主题上设置组件z-index [英] Set component z-index on custom theme in Material-UI

问题描述

我正在尝试在Material-UI中的自定义主题上设置组件的z-index.他们已将zIndex从版本0.14.2中的基本主题移出，而是在名为zIndex.js的节点模块中设置了zIndex.我想在我的组件中覆盖zIndex，但是在不更改节点模块本身的情况下无法找到实现此目的的方法，这是一个坏主意.我在这样的单独页面中设置了自定义主题

I'm trying to set the z-index of components on a custom theme in Material-UI. They have moved the zIndex out of the base theme in the in version 0.14.2 and instead zIndex is set in a node module called zIndex.js. I would like to override the zIndex in my component but can't find a way to do this without changing the node module itself which is a bad idea. I have a custom theme set up in a separate page like so

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中使用它(为简洁起见，代码缩短了)

I then use that in app.jsx like so (code shortened for brevity)

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.

While this works fine for setting custom colors, I'm unsure of how to set a custom zIndex.

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

I have tried creating my own zIndex.js and importing that like so

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,
    }
};

除了像这样将其包含为对象外

As well as just including it as an object like so

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存储库中询问了问题，并被定向到此页面，该页面对我没有帮助 http://www.material-ui.com/#/get-started/server-rendering

Neither of which works. It always uses the zIndex values from the node module, even if it's not imported in the custom theme page. I've asked on the material-ui repo and was directed to this page which didn't help me http://www.material-ui.com/#/get-started/server-rendering

任何人都知道如何在不更改节点模块本身的情况下更改zIndex?

Anybody have an idea how I can change the zIndex without changing the node module itself?

推荐答案

(解决方案):在昨天整日奋斗并最终发布在这里之后，我弄清楚了如何为自定义主题中的组件覆盖zIndex.希望这对其他人有帮助.定制主题时，可以在getMuiTheme方法中包含第二个参数. Material-UI文档中没有任何地方提到这一点.在app.jsx或您要覆盖zIndex的任何组件中，您都可以像这样更改代码(为简洁起见，代码已缩短)

(SOLUTION): After battling this all day yesterday and finally posting here, I figured out how to override the zIndex for components in a custom theme. Hope this helps someone else. You can include a second parameter in the getMuiTheme method when customizing your theme. This isn't mentioned in the Material-UI docs anywhere. In app.jsx or whatever component you want to override the zIndex in, you can change it like this (code shortened for brevity)

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的列表.看起来像这样

I am making the change in my main app.jsx component because I want these changes to take effect in all of my other components but I believe you can make these changes at individual component level as well without applying them to all of your components. If you look in the material-ui node modules under lib/styles/zIndex.js you will find a list of component zIndex's that can be changed this way. it looks like this

"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组件中更改了弹出框和zIndex层.

So as you can see from my example, I'm simply changing the popover and layer zIndex in my app.jsx component.

这篇关于在Material-UI中的自定义主题上设置组件z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！