Material-UI themeで他要素の規定パラメータを取得
Reactでmaterial uiを使っていて、ある要素を他要素より手前に持ってきたかった。
const styles = (theme: Theme): StyleRules => createStyles({
mainAppBar: {
flexGrow: 1,
},
selectYearForm: { // これを手前に持ってきたい
top: theme.spacing(3),
right: theme.spacing(5),
position: "fixed",
width: 80,
},
}
これだけだとselectYearFormが背後に隠れる。
勿論、それぞれにzIndex (z-index)を指定すれば手前に持ってこれる
const styles = (theme: Theme): StyleRules => createStyles({
mainAppBar: {
flexGrow: 1,
zIndex: 100
},
selectYearForm: { // これを手前に持ってきたい
top: theme.spacing(3),
right: theme.spacing(5),
position: "fixed",
width: 80,
zIndex: 110
},
}
ただ、既存のmainAppBarのzIndexに影響を与えずにselectYearFormを手前に持ってきたかった。
以下のように書いて解決。
const styles = (theme: Theme): StyleRules => createStyles({
mainAppBar: {
flexGrow: 1,
},
selectYearForm: { // これを手前に持ってきたい
top: theme.spacing(3),
right: theme.spacing(5),
position: "fixed",
width: 80,
zIndex: theme.zIndex.appBar + 1
},
}
なお、Material UIでコンポーネントのデフォルトz-indexは以下のようになっている。
const zIndex = {
mobileStepper: 1000,
speedDial: 1050,
appBar: 1100,
drawer: 1200,
modal: 1300,
snackbar: 1400,
tooltip: 1500,
};
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/zIndex.js
