Reactjs 物料界面：抽屉关闭时如何保持最小尺寸？

我刚刚进入，想知道当抽屉的状态设置为关闭时，如何保持最小抽屉大小。更具体地说：在沙盒示例中，我希望红色区域始终可见（即抽屉设置为关闭），而蓝色区域在抽屉打开时可见

import React，{Fragment，useState}来自“React”；
从“@material ui/core/SwipeableDrawer”导入SwipeableDrawer；
const iOS=process.browser&&/iPad | iPhone | iPod/.test（navigator.userAgent）；
导出默认函数MyComponent（）{
const[drawerIsOpen，setDrawerIsOpen]=useState（true）；
返回(
SetDrawerRisOpen（真）}
>
点击我！
SetDrawerRisOpen（假）}
anchor=“底部”
disableBackdropTransition={！iOS}
disableDiscovery={iOS}
BackdropProps={{不可见：真}}
>
{" "}
);
}

import React, { Fragment, useState } from "react";
import SwipeableDrawer from "@material-ui/core/SwipeableDrawer";

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

export default function MyComponent() {


  const [drawerIsOpen, setDrawerIsOpen] = useState(true);

  return (
    <Fragment>
      <div style={{ height: "1000px", backgroundColor: "grey" }}>
        <button
          style={{ position: "absolute", top: "0", left: "0", zIndex: "4" }}
          onClick={() => setDrawerIsOpen(true)}
        >
          Click Me!
        </button>

        <SwipeableDrawer
          open={drawerIsOpen}
          onClose={() => setDrawerIsOpen(false)}
          anchor="bottom"
          disableBackdropTransition={!iOS}
          disableDiscovery={iOS}
          BackdropProps={{ invisible: true }}
        >
          <div style={{ height: "200px", backgroundColor: "blue" }}>
            <div
              style={{
                position: "absolute",
                height: "100px",
                width: "100%",
                backgroundColor: "red"
              }}
            >
              {" "}
            </div>
          </div>
        </SwipeableDrawer>
      </div>
    </Fragment>
  );
}