react-styleguidist

How to override the z-index of sidebar of React Styleguidist

I have a component which has a z-index set to a larger value. Even if it's set to 1 when I scroll left to right the component loads over the react-styleguidist sidebar. I couldn't find any documentation regarding overriding the z-index via the styleguide.config.js.

Solution

  • Adding the zIndex to sidebar property in the styleguide.config.js solved my problem. Here is the snippet I needed to add to override the z-index in the config file.

    module.exports = {
 styles: {
  StyleGuide: {
   sidebar: {
    zIndex: 3
   }
  }
 }
}

    Discovered this via hit and trial method as I was typing the question.