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

特に 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 の考え方からは反しているので、どうなのかなぁと。