![\"Logo\"](\"https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/7ebc86621d8df8c21f0c39bcca6d476f6f7a2051/packages/mui/logo.png\"){kind=logo}
\n \n\n \n \n \n \n\n
\n Material UI theme, fields and widgets for react-jsonschema-form.\n
\n Explore the docs »\n
\n
\n View Playground\n ·\n Report Bug\n ·\n Request Feature\n
![\"product-screenshot\"](\"./screenshot.png\")
](https://rjsf-team.github.io/@rjsf/mui)\n\n### Built With\n\n- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)\n- [Material UI 7](https://mui.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n\n\n\n## Getting Started\n\n### Prerequisites\n\nNOTE: Material UI 7 requires React 18, so you will need to upgrade\n\n- `@mui/material >= 7`\n- `@mui/icons-material >= 7`\n- `@emotion/react >= 11`\n- `@emotion/styled >= 11`\n- `@rjsf/core >= 6`\n- `@rjsf/utils >= 6`\n- `@rjsf/validator-ajv8 >= 6`\n\n```bash\nyarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @rjsf/core @rjsf/utils @rjsf/validator-ajv8\n```\n\n### Installation\n\n```bash\nyarn add @rjsf/mui\n```\n\n\n\n## Usage\n\n### Material UI version 7\n\n```js\nimport Form from '@rjsf/mui';\n```\n\nor\n\n```js\nimport { withTheme } from '@rjsf/core';\nimport { Theme } from '@rjsf/mui';\n\n// Make modifications to the theme with your own fields and widgets\n\nconst Form = withTheme(Theme);\n```\n\n### Customizing MUI-specific props\n\nYou 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`.\n\n```json\n\"myField\": {\n \"ui:options\": {\n \"mui\": {\n \"variant\": \"filled\",\n \"sx\": {\n \"backgroundColor\": \"background.paper\"\n },\n \"rjsfSlotProps\": {\n \"input\": {\n \"endAdornment\": \"kg\"\n }\n }\n }\n }\n}\n```\n\nFor 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/).\n\n\n\n\n## Roadmap\n\nSee the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues).\n\n\n\n## Contributing\n\nRead our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.\n\n\n\n## Contact\n\nrjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)\n\nGitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)\n\n\n\n\n[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg\n[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions\n[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg\n[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors\n[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square\n[license-url]: https://choosealicense.com/licenses/apache-2.0/\n[npm-shield]: https://img.shields.io/npm/v/@rjsf/mui/latest.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@rjsf/mui\n[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/mui.svg?style=flat-square\n[npm-dl-url]: https://www.npmjs.com/package/@rjsf/mui\n[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/e2e1181d1020f18cad0c80c661ddae28edb9794e/packages/mui/screenshot.png\n","readmeFilename":"README.md"}