Reactjs 反作用腹板下半模态

我正在使用React JS构建一个应用程序的响应版本，我正在寻找一个下半部分模态组件。就像我的那个。 我也在使用MaterialUI，我不确定是否可以在模式对话框中进行更改以获得相同的结果

---

您可以使用reactstrap与以下CSS一起使用：

.modal-content {
  position: absolute;
  bottom: 0;
}

.modal.show .modal-dialog {
  height: -webkit-fill-available;
}

工作示例

或者使用材质UI，使用以下css（400px是div的宽度，两边都有32px的填充）。。。232px是这个数字的一半，它总是给我们以中心div：

.modalBody {
  left: calc(50% - 232px);
  bottom: 0;
}

以下是从材质UI的更改JS：

const body=(
情态语篇

莫利斯夫妇，最不常见的是卢克图斯夫妇。

);

---

工作示例

当屏幕到达

xs

断点时，您可以从material ui使用

makeStyles

实用程序自定义

对话框

，以实现响应样式的应用

从“react-dom”导入ReactDOM；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/styles”导入{makeStyles}”；
导入“/styles.css”；
const useStyles=makeStyles（（主题）=>({
根目录：{
[theme.breakpoints.down（“xs”）]：{
alignItems：“柔性端”//将对话框推到底部
}
},
论文：{
//使内容全宽
[theme.breakpoints.down（“xs”）]：{
保证金：0，
最大宽度：“100%”，
宽度：“100%”
}
}
}));
函数App（）{
const classes=useStyles（）；
const[open，setOpen]=useState（false）；
const openDialog=（）=>setOpen（true）；
返回(
打开对话框
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

---

您可以看到它在这里工作（调整窗口大小以查看其变化情况）

您正在构建一个react本机应用程序？react web AppThank@diedu，这正是我所需要的

  const body = (
    <div className={`${classes.paper} modalBody`}>
      <h2 id="simple-modal-title">Text in a modal</h2>
      <p id="simple-modal-description">
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </p>
      <SimpleModal />
    </div>
  );