web-dev-qa-db-ja.com

モーダルをマテリアルUIのトランジションで中心に置き、応答性を高める方法は？

マテリアルUIを使用してモーダルをトランジションで使用しようとしていますが、それを中央に配置し、小さな画面（モバイル）で応答または中央に配置することにも問題があります。

モーダルは中央揃えにすることができ、トランジションを使用しない場合は小さいサイズで見栄えがよくなりますが、トランジションを追加すると、モーダルを中央揃えにすることもレスポンシブにすることもできません。

これは、遷移のないコードモーダル link です。大きいまたは小さい画面サイズでうまく動作します。

これは、遷移 link を含むモーダルコードです。

topとleftの値を変更しようとしましたが、それでも大画面サイズと小画面サイズの中央に配置できません。

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

誰か助けてもらえますか？

cssresponsivematerial-ui-next
6
Ras

デフォルトでは、モーダルはフレックスを使用する親コンテナを作成するため、中央に配置するには、左側にコメントを付けることができます。モーダルに設定されているプロパティ、

return {
    top: `${top}%`,
    margin:'auto'
    // left: `${left}%`,
    // transform: `translate(-${top}%, -${left}%)`,
  };

そして、あなたのモーダルコンテナでは、これにアイテムを揃えることができます

 <Modal
    ...
    style={{display:'flex',alignItems:'center',justifyContent:'center'}}
  >

https://stackblitz.com/edit/react-1ny5g7?file=demo.js

13
Renzo Calla

これは私のために働きました：

{
    width: '100%',
    maxWidth: '100vw',
    maxHeight: '100%',
    position: 'fixed',
    top: '50%',
    left: '0',
    transform: 'translate(0, -50%)',
    overflowY: 'auto'
}
0
Lance