tshohe's memo

おぼえたことをかく

react-modalのスタイルで少し詰まった話

不慣れなフロントエンドについての勉強。(業務で使うこともない...)

今勉強用に作っているアプリのスマホ対応が適当だったのでちゃんとしてみることに。

このアプリではモーダルのコンポーネントとして react-modal を利用していて、 これまでは下記のようにjsxファイル側で定義していたんですが、これだとデバイスごとに設定変えたりとかがやりにくいので、CSSで定義するように。

これまでの定義

import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
...

上記をコメントアウトしてReactModal__Contentクラスに対してスタイルを定義します。

.ReactModal__Content {
        width: 90%;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
}

これでできるかと思ったら、customStylesをコメントアウトしたときにモーダルのstyle属性に各種ポジション情報が0pxで定義されていました。そのため、モーダルが画面の左上に寄ってしまっていました。 (defaultStyleがそうなっている模様)

https://github.com/reactjs/react-modal/blob/master/src/components/Modal.js#L84

style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.75);"

そこで、top, left, right, bottomは結局customStyles側で定義することに。
今回はデバイスごとに変更したいのがwidthだけだったので良かったけど、topとかいじりたくなったら面倒そうだな...。