question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

zIndex Theme override/make additions

See original GitHub issue

I would like the ability to either add new properties to the zIndex theme object or modify the currently available keys:

    mobileStepper: 1000,
    appBar: 1100,
    drawer: 1200,
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500

for example, I would like to add popover: 1000 but cannot find a way to add it to the theme. The last I could find online regarding this was for older versions of the library and are now obsolete on our version 4.4.2, https://stackoverflow.com/questions/35071435/set-component-z-index-on-custom-theme-in-material-ui.

If I have missed this somewhere in the documentation, please point me in the right direction. I was only able to find the bit about changing the values (not adding or modifying the keys), https://material-ui.com/customization/z-index/

Thanks very much and appreciate your work!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Oct 9, 2019

Right, so people can then do:

.MuiPopover-root {
  z-index: 1000 !important;
}

or with the theme

const theme = createMuiTheme({
  overrides: {
    MuiPopover: {
      root: {
        zIndex: '1000 !important',
      }
    }
  }
});
0reactions
combstraightcommented, Dec 31, 2020

Is it possible to set zIndex in overrides within createMuiTheme using '!important'? Currently trying to override MuiDialog’s zIndex using createMuiTheme but failing to do so since the property does not accept strings.

Read more comments on GitHub >

github_iconTop Results From Across the Web

mui/material-ui - zIndex Theme override/make additions - GitHub
I would like the ability to either add new properties to the zIndex theme object or modify the currently available keys: mobileStepper: 1000 ......
Read more >
Understanding CSS z-index - MDN Web Docs - Mozilla
The z-index attribute lets you adjust the order of the layering of objects when rendering content. In CSS 2.1, each box has a...
Read more >
How to set the zIndex on the drawer component - Stack Overflow
If you don't want to use important! you can override zIndex either by using Material-UI theme API or by inlining styles.
Read more >
Customizing components - Material-UI - MUI
The first way to override the style of a component is to use class names. Every component provides a className property which is...
Read more >
A user's guide to CSS variables – Increment: Frontend
Cycles make CSS variables invalid at computed value time ... z-index: var(--i); ... We could even create themes on the fly, by overriding...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found