README

<p align="center"> <a href="https://github.com/rjsf-team/react-jsonschema-form"> </a> <h3 align="center">@rjsf/mui</h3> <p align="center"> Material UI theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.

<a href="https://rjsf-team.github.io/react-jsonschema-form/docs/"><strong>Explore the docs »</strong></a>




<a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>

</p> </p>

Table of Contents
About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
- Material UI version 7
Roadmap
Contributing
Contact

About The Project

Exports MUI version 5 theme, fields, and widgets for react-jsonschema-form.

Built With

Getting Started

Prerequisites

NOTE: Material UI 7 requires React 18, so you will need to upgrade

@mui/material >= 7
@mui/icons-material >= 7
@emotion/react >= 11
@emotion/styled >= 11
@rjsf/core >= 6
@rjsf/utils >= 6
@rjsf/validator-ajv8 >= 6

bash

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @rjsf/core @rjsf/utils @rjsf/validator-ajv8

Installation

bash

yarn add @rjsf/mui

Usage

Material UI version 7

import Form from '@rjsf/mui';

import { withTheme } from '@rjsf/core';
import { Theme } from '@rjsf/mui';

// Make modifications to the theme with your own fields and widgets

const Form = withTheme(Theme);

Customizing MUI-specific props

You can pass MUI-specific props (like sx, rjsfSlotProps, variant, etc.) directly to any MUI component rendered by a Template or Widget via ui:options in the uiSchema.

json

"myField": {
  "ui:options": {
    "mui": {
      "variant": "filled",
      "sx": {
        "backgroundColor": "background.paper"
      },
      "rjsfSlotProps": {
        "input": {
          "endAdornment": "kg"
        }
      }
    }
  }
}

For more details on available properties and rjsfSlotProps targets, see the Material UI Customization Documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Read our contributors' guide to get started.

Contact

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form

Table of Contents