Material UI theme, fields and widgets for react-jsonschema-form.
Explore the docs »
View Playground
·
Report Bug
·
Request Feature
](https://rjsf-team.github.io/@rjsf/mui)
### Built With
- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
- [Material UI 7](https://mui.com/)
- [TypeScript](https://www.typescriptlang.org/)
## 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
```js
import Form from '@rjsf/mui';
```
or
```js
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](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/themes/mui/uiSchema/).
## Roadmap
See the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues).
## Contributing
Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.
## Contact
rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)
GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg
[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
[license-url]: https://choosealicense.com/licenses/apache-2.0/
[npm-shield]: https://img.shields.io/npm/v/@rjsf/mui/latest.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@rjsf/mui
[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/mui.svg?style=flat-square
[npm-dl-url]: https://www.npmjs.com/package/@rjsf/mui
[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/e2e1181d1020f18cad0c80c661ddae28edb9794e/packages/mui/screenshot.png
---
_Source: https://npm.io/package/@rjsf/mui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._