これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の14日目の記事です。

react-jsonschema-form (RJSF) では、あらかじめ用意されているデザインテーマを適用したり、自作のデザインテーマを適用したりできます。
Custom Themes | react-jsonschema-form

また、公式ドキュメントのAPI Referenceには

AntD
Chakara-UI
Semantic-UI

に関しての記載があります。

　
一方、MUIなど公式ドキュメントに記載されていないUIライブラリについては、RJSFのGithubのREADMEに記載があります。
https://github.com/rjsf-team/react-jsonschema-form

今回はGithubの記載に従い、MUIのデザインテーマをRJSFに適用してみます。
https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/mui

環境
MUIのテーマをインストールする
FormをMUIのコンポーネントに差し替える
MUIを使ったカスタムテーマを適用する
ソースコード

環境

react-jsonschema-form 5.15.0
React 18.2.0
React Router 6.20.1

MUIのテーマをインストールする

前提として、RJSF本体のインストールは終わっているものとします。

RJSFとは別にインストールが必要ですので、RJSFのMUIのデザインページに従い、追加でインストールします。

$ npm install @rjsf/mui

FormをMUIのコンポーネントに差し替える

READMEにある通り、importを差し替えるだけで、MUI化されたRJSFのFormコンポーネントになります。

// オリジナル版
// import Form from "@rjsf/core"

// MUI版
import Form from "@rjsf/mui

MUIを使ったカスタムテーマを適用する

例えば、あるシステムではMUIのテーマをカスタマイズしており、そのテーマをRJSFにも適用したいこともあります。
Theming - Material UI

　
その場合、通常のMUIのテーマのカスタマイズ同様、

createTheme 関数でテーマを作成する
ThemeProvider でテーマを適用する
ThemeProviderの中に、RJSFのFormコンポーネントを入れる

を行うことで、そのテーマを適用できます。

　
例えば、以下ではボタンのメインカラーをゴールドにしたテーマをRJSFへ適用しています。

import {RJSFSchema} from "@rjsf/utils";
import Form from "@rjsf/mui";  // MUI version
import validator from "@rjsf/validator-ajv8";
import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import Box from '@mui/material/Box';

export const CustomMuiThemeForm = () => {
  const schema: RJSFSchema = {
    title: "Custom MUI Theme Form",
    type: "object",
    required: [],
    properties: {
      foo: {
        type: "string",
        const: "foo"
      }
    }
  }

  const theme = createTheme(
    {
      palette: {
        primary: {
          main: "#ffd700"
        }
      }
    }
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{width: "400px", ml: 2, mt: 2}}>
        <Form
          schema={schema}
          validator={validator}
        />
      </Box>
    </ThemeProvider>
  )
}