score:12

below are the default styles for backdrop:

export const styles = {
  /* styles applied to the root element. */
  root: {
    // improve scrollable dialog support.
    zindex: -1,
    position: 'fixed',
    display: 'flex',
    alignitems: 'center',
    justifycontent: 'center',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundcolor: 'rgba(0, 0, 0, 0.5)',
    webkittaphighlightcolor: 'transparent',
  },
  /* styles applied to the root element if `invisible={true}`. */
  invisible: {
    backgroundcolor: 'transparent',
  },
};

you can see that the approach it uses for covering the whole screen is to use right, bottom, top, and left of zero along with a position of fixed. by changing the position to absolute, it will instead cover its closest positioned ancestor. this means that you will want to change the containing paper to have a position of relative (unless it already had a position of absolute). you also need to adjust the z-index of the backdrop, since it defaults to -1 which will put it behind other things in the current stacking context (such as the paper it is contained within).

below is a working example:

import react from "react";
import cssbaseline from "@material-ui/core/cssbaseline";
import paper from "@material-ui/core/paper";
import { withstyles } from "@material-ui/core/styles";
import grid from "@material-ui/core/grid";
import backdrop from "@material-ui/core/backdrop";
import button from "@material-ui/core/button";

const styledpaper = withstyles({
  root: {
    height: 200,
    position: "relative"
  }
})(paper);
const limitedbackdrop = withstyles({
  root: {
    position: "absolute",
    zindex: 1
  }
})(backdrop);
export default function app() {
  const [showbackdrop, setshowbackdrop] = react.usestate(false);
  return (
    <div>
      <cssbaseline />
      <grid container spacing={2}>
        <grid item xs={6}>
          <styledpaper>
            <limitedbackdrop open={showbackdrop}>
              <button onclick={e => setshowbackdrop(!showbackdrop)}>
                hide backdrop
              </button>
            </limitedbackdrop>
            <div>
              paper 1<br />
              {!showbackdrop && (
                <button onclick={e => setshowbackdrop(!showbackdrop)}>
                  show backdrop
                </button>
              )}
            </div>
          </styledpaper>
        </grid>
        <grid item xs={6}>
          <styledpaper>paper 2</styledpaper>
        </grid>
      </grid>
    </div>
  );
}

edit backdrop within parent


Related Query

More Query from same tag