Component API ページの見方

Props

そのコンポーネントで渡すことができるプロパティの名前、型、デフォルト値、説明です。

TypeScript の場合、大抵コンポーネント名Propsという名前でプロパティの型がインポートできる形になってます。

CSS

デフォルトスタイルを上書きする為のキー名やクラス名、簡単な説明が載ってます。makeStylesなどでそのキー名を使ってスタイルを作ります。

スタイル

makeStylesを使います。これは戻り値で高頻度でuseStylesという名前で束縛される React フックを返します。

import { makeStyles } from '@material-ui/core/styles';

makeStylesへ CSS Object を渡すことでスタイルを定義できます。戻り値は React Hook となっています。

const useStyles = makeStyles({
  root: {
    backgroundColor: "red",
    color: props => props.color
  }
});

TypeScript の場合は、makeStyles<Theme, StylesProps>とすることでpropsの型が効くようになり便利です。

あとはこと React Hook を React Component 内部で使い classes という {key: selector} のようなオブジェクトを取り出して使うだけです。

const Foo = props => {
  const classes = useStyles(props);

  return <Tab classes={classes} />;
};

このclassesは上記の<Tab>のようなある程度決められたキーを持つオブジェクトである必要があります。でなれけば以下のようなエラーがコンソールに表示されます。

mergeClasses.js:26 Material-UI: the key `icon` provided to the classes prop is not implemented in ForwardRef(Radio).
You can only override one of the following: root,checked,disabled,colorPrimary,colorSecondary.

Radio

まずはRadioコンポーネントを使う準備をします。

import Radio from "@material-ui/core/Radio";

もし TypeScript 上でならRadioProps型も取り込むと便利かもしれません。

import Radio, {RadioProps} from "@material-ui/core/Radio";

まずは使ってみる

単に<Radio />と置くだけでも以下の画像のように動きます。(分かりやすいようにチェックを入れたものを横に置いてます。)

RadioComponentのデフォルトスタイル

カスタマイズ

いくつか設定可能なプロパティがあります。

checked

上記画像のようなチェック状態にしたい場合はchecked(boolean)を設定することで上記画像の右側のような状態にできます。

onChange

状態が変わった時に呼び出されるハンドラーです。これには、

(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;

というような型の関数を渡します。

<Radio
  onChange={(changeEvent, checked) => {
    console.log(changeEvent, checked /* === true */);
  }}
/>;

value

<input>要素のvalueとなる値を渡します。これを設定することでchangeEventからvalueを取得することができます。

<Radio
  onChange={changeEvent => {
    console.log(changeEvent.target.value /* === 'foo' */);
  }}
  value="foo"
/>;

name

<input>要素のnameとなる値を渡します。主にグループを形成する為に使います。

<Radio name="foo" />;

inputProps

RadioPropsで用意されていないけど<input>要素に渡したい」属性はここに渡します。

<Radio
  inputProps={{
    "aria-label": "foo"
  }}
/>;

data-fooのような属性も問題なく渡せますが、TypeScript の場合型エラーになります。

型 '{ "data-foo": string; }' を型 'InputHTMLAttributes<HTMLInputElement>' に割り当てることはできません。

classes

makeStylesuseStylesにより生成されたclassesオブジェクトを渡します。

size

Radio ボタンの大きさをsmall | mediumの中から指定できます。デフォルトはmediumです。

color

Radio ボタンの色を'primary' | 'secondary' | 'default'の中から指定できます。デフォルトは'secondary'です。
'primary'はチェック時に青色、'default'は灰色で塗りつぶされます。

icon

デフォルトでは Radio ボタンのビジュアルは<svg>要素なのでCSSで弄る事が難しいです。このプロパティにReact.ReactNodeを渡すことで<svg>要素が置かれている箇所を好きな要素に置き換えることができます。

checkedIcon

iconと同じく<svg>要素を置き換えることが目的ですが、こちらはチェック済みの状態のReact.ReactNodeを渡します。

これは以下のようなマークアップで、

<>
  <Radio
    icon={
      <div
        style={{
          background: "gray",
          width: 15,
          height: 15,
          borderRadius: "50%"
        }}
      />
    }
  />
  <Radio
    checked
    checkedIcon={
      <div
        style={{
          background: "orange",
          width: 15,
          height: 15,
          borderRadius: "50%"
        }}
      />
    }
  />
</>;

以下の画像のように表示されます。

iconとcheckedIconの例

RadioGroup

以下でインポートして使います。

import RadioGroup from '@material-ui/core/RadioGroup';

この要素で囲む理由の1つはチェックされる要素を1つにする為です。RadioGroup はプロパティにvalueを設定でき、この値と等しいvalueを持つ子 Radio をチェック済みにすることができます。

さらにもう1つの理由はキーボード操作をし易くする為です。RadioGroup で囲むとキーボードの キーでチェックしたい項目を切り替えることができます。