React × Redux × AtomicDesignでは、containerでstyleを持つケースもある?

2019-01-16

特に form を扱うケースにおいては、container に style を持たざるを得ないケースもあるのかなーと。

例えば、formik を使う場合、container が以下のような形になります。

import Input from "components/atoms/Input"; import * as React from "react"; import { Field, Form, withFormik } from "formik"; const SampleForm = () => ( <Form> <Field component={Input} name="hoge" /> <Field component={Input} name="fuga" /> </Form> ); export default withFormik(SampleForm);

このままだと、Input でのみスタイリングが当てられるので、これで OK というところはないでしょう。

なので、ちょっとスタイリングを入れてやるために、こうしてやります。

import Input from "components/atoms/Input"; import InputList from "components/molecules/InputList"; import * as React from "react"; import { Field, Form, withFormik } from "formik"; const SampleForm = () => ( <Form> <InputList> {[ <Field component={Input} name="hoge" />, <Field component={Input} name="fuga" />, ]} </InputList> </Form> ); export default withFormik(SampleForm);

ぱっと見、InputList にdisplay: flexとかが入っているんだろうなーという印象を受けます。

で、React 的にも Redux 的にも AtomicDesign 的にもここまでは問題ありません。(と、思っています)

ここで問題となってくるのが、例えば、hoge 側の Input と fuga 側の Input で width を変えたいケースです。

AtomicDesign 的に考えると、以下のような対策が考えつきます。

  • Input component を 2 つに分ける
  • Input props によって、style を切り替えたりする
  • InputList 内の style を変える
  • className を付与して、globalStyle などで対応する

が、これらの対策、結構にイマイチな感じがあるのですが、どうなんでしょうか…。

個人的には、ここは割り切って、以下のような書き方もアリなのかなーと思い始めました。

import Input from "components/atoms/Input"; import InputList from "components/molecules/InputList"; import * as React from "react"; import { Field, Form, withFormik } from "formik"; const SampleForm = () => ( <Form> <InputList> {[ <Field component={Input} name="hoge" style={{ width: "200px" }} />, <Field component={Input} name="fuga" style={{ width: "100px" }} />, ]} </InputList> </Form> ); export default withFormik(SampleForm);

ただ言わずもがな、上記の対応だと、Redux の考え方からは反しているので、どうなのかなぁと。

© 2018 kk-web