gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 23:31:14 25 4
gpt4 key购买 nike

我正在尝试在 Material-UI 中的自定义主题上设置组件的 z-index。他们在 0.14.2 版本中将 zIndex 从基本主题中移出,而是将 zIndex 设置在名为 zIndex.js 的节点模块中。我想覆盖我的组件中的 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 吗?

最佳答案

(解决方案):在昨天与此作斗争并最终在这里发布之后,我想出了如何覆盖自定义主题中组件的 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 组件中的弹出框和层 zIndex。

关于material-ui - 在 Material-UI 中的自定义主题上设置组件 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35071435/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com