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
}
};
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
};
While this works fine for setting custom colors, I'm unsure of how to set a custom zIndex.
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,
}
};
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
Anybody have an idea how I can change the zIndex without changing the node module itself?