【Material-UI】FormControlLabelを使ったラジオフォーム作成

はじめに

今回は、React UI コンポーネントフレームワークの「Material-UI」を使って、以下のようなラジオフォームを作成します。

ポイント

• 基本的にはMaterial-UIデフォルトスタイルで作成
• 複数のコンポーネントを組み合わせて作る　
• ラベルのフォントサイズの変更について

マークアップ構成

<FormControl>コンポーネントで、Formの領域を確保して、
<RadioGroup>コンポーネントでラップした項目一覧（<Radio>コンポーネント）を配置します。
今回は、ラベルを<FormControlLabel>コンポーネントを使います。

以下の構成です。

return (
  <FormControl>
    {/* グループにラベル */}
    <FormLabel />
    {/* ラジオグループ */}
    <RadioGroup>
　　  {/* リスト */}
      <FormControlLabel>
        <Radio />
      </FormControlLabel>
      ...
    </RadioGroup>
  </FormControl>
)

ソースコード

それぞれが選択された場合の処理を追加して完成です。

import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

export default function App() {
  const [value, setValue] = React.useState("React");
  const classes = styles();

  const handleChange = event => {
    // クリックされたら、valueの値をsetします。
    setValue(event.target.value);
  };

  return (
    <div className="App">
      <FormControl component="label">
        <FormLabel component="label">JavaScript framework</FormLabel>
        <RadioGroup
          name="JavaScript framework"
          value={value}
          onChange={handleChange}
        >
          <FormControlLabel
            value="React"
            control={<Radio />}
            label="React"
          />
          <FormControlLabel
            value="Vue.js"
            control={<Radio />}
            label="Vue.js"
          />
          <FormControlLabel
            value="AngularJS"
            control={<Radio />}
            label="AngularJS"
          />
          <FormControlLabel
            value="jQuery"
            disabled
            control={<Radio />}
            label="jQuery"
          />
        </RadioGroup>
      </FormControl>
    </div>
  );
}

ラベルのフォントサイズを変更したい

Material-UIのデフォルトデザインで利用できれば上記で良いですが、
なかなかデザインいじらずに使えると機会は少ないかと思います。

今回は、ラベルのフォントサイズを変更してみます。

FormControlLabelの構造について

<FromControlLabel>コンポーネントは、大きく、controlプロパティで指定したエレメント（Radio・Switch・Checkbox）と「ラベル」の二つで構成されています。

公式リファレンスによると、ラベルのデフォルトスタイルは、Typographyスタイルが当たっているようです。

Styles applied to the label's Typography component.

labelプロパティにエレメントを当てて上書きする

テキストでそのまま送らずに、<span>タグ等で囲ってあげて、スタイルを当ててあげることで上書きしてみました。

<FormControlLabel
  value="React"
  control={<Radio />}
  label={<span className={classes.labelRoot}>React</span>}
/>

紹介した内容のSnadbox