Material ui 在材质UI中的自定义主题上设置组件z索引
我试图在MaterialUI中的自定义主题上设置组件的z索引。在版本0.14.2中,他们将zIndex移出了基本主题,取而代之的是在名为zIndex.js的节点模块中设置zIndex。我想在我的组件中重写zIndex,但在不更改节点模块本身的情况下找不到一种方法来实现这一点,这是一个坏主意。我在一个单独的页面上设置了一个自定义主题,就像这样Material ui 在材质UI中的自定义主题上设置组件z索引,material-ui,Material Ui,我试图在MaterialUI中的自定义主题上设置组件的z索引。在版本0.14.2中,他们将zIndex移出了基本主题,取而代之的是在名为zIndex.js的节点模块中设置zIndex。我想在我的组件中重写zIndex,但在不更改节点模块本身的情况下找不到一种方法来实现这一点,这是一个坏主意。我在一个单独的页面上设置了一个自定义主题,就像这样 import Colors from 'material-ui/lib/styles/colors'; import ColorManipulator fr
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
中像这样使用它(为了简洁,代码缩短)
虽然这可以很好地设置自定义颜色,但我不确定如何设置自定义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,
}
};
就像这样把它作为一个对象
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值,即使它没有导入到自定义主题页面中。
我已经在材料ui repo上询问过,并被定向到此页面,这对我没有帮助
有人知道如何在不更改节点模块本身的情况下更改zIndex吗 (解决方案):经过昨天一整天的斗争,最后在这里发布,我想出了如何覆盖自定义主题中组件的zIndex。希望这对其他人有帮助。自定义主题时,可以在getMuiTheme方法中包含第二个参数。材料UI文档中没有提到这一点。在app.jsx或任何您想要覆盖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。有人能更新这个非常有用的问题和答案吗?我认为这对像meI这样的初学者会有很大帮助。我建议您在这里查看覆盖的文档。它会为你指明正确的方向。现在,您可以使用
root
类覆盖组件的zIndex。