React Material UI テキストフィールドを readonly にしたい

Material UI の <TextField /> コンポーネントは出力時にいい感じに div で囲ってくれるからか、直接 readonly 属性を渡しても設定されなかった。

@mui/material@5.2.7

NG: `<TextField />` に readonly 属性を渡しても readonly な状態にはならない

disabled は効くけど readonly は効かない

import { TextField } from '@mui/material';

const MyComponent = (): JSX.Element => {
  return  (
    <>
      <TextField label="disabled" disabled /> {/* disabled になる */}
      <TextField label="readonly" readonly /> {/* readonly にはならない */}
    </>
  );
}

inputProps を使えば OK

inputProps 属性に input タグに渡したい属性を props として渡せるっぽいので、この props 経由で readonly を指定できる

import { TextField } from '@mui/material';

const MyComponent = (): JSX.Element => {
  return  (
    <>
      <TextField label="disabled" disabled /> {/* disabled になる */}
      <TextField label="readonly" inputProps={{ readonly: true }} /> {/* readonly になる */}
    </>
  );
}

`<Input />` コンポーネントには直接 readonly を指定できる

<TextField /> コンポーネントは HelpText とか色々とよしなに出力してくれますが、デザイン的に問題がないならシンプルに input を出力する <Input /> コンポーネントを使えば簡単です。

import { Input } from '@mui/material';

const MyComponent = (): JSX.Element => {
  return  (
    <>
      <Input label="disabled" disabled /> {/* disabled になる */}
      <Input label="readonly" readonly /> {/* readonly になる */}
    </>
  );
}

ドキュメントには <FormControl /> で囲って FormControl に disabled を設定して子の <Input /> を disabled にする方法が載ってるけど、readonly も disabled も直接 <Input /> コンポーネントに指定することができました。

cf. Inputs | Text Field React component - MUI

　
今回は単純にライブラリの使い方のメモでした。
おわり

[参考]