@spectrumrjsf1/material-ui

Material UI 4 and 5 themes, fields and widgets for react-jsonschema-form.
Explore the docs »

View Playground · Report Bug · Request Feature

About The Project
Getting Started
- Prerequisites
- Installation
Usage
Roadmap
Contributing
Contact

About The Project

Exports material-ui version 4 and 5 themes, fields and widgets for react-jsonschema-form.

Built With

Getting Started

Prerequisites

Material UI version 4

@material-ui/core >= 4.12.0 (in 4.12.0, the library developers made it forward compatible with Material-UI V5)
@material-ui/icons >= 4.11.0 (in 4.11.0, the library developers made it forward compatible with Material-UI V5)
@spectrumrjsf1/core >= 4.0.0

yarn add @material-ui/core @material-ui/icons @spectrumrjsf1/core

Material UI version 5

NOTE: Material UI 5 requires React 17, so you will need to upgrade

@mui/material
@mui/icons-material
@emotion/react
@emotion/styled
@spectrumrjsf1/core >= 4.0.0

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @spectrumrjsf1/core

Installation

yarn add @spectrumrjsf1/material-ui

Usage

Material UI version 4

import Form from "@spectrumrjsf1/material-ui/v4";

import { withTheme } from "@spectrumrjsf1/core";
import Theme from "@spectrumrjsf1/material-ui/v4";

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

const Form = withTheme(Theme);

Typescript configuration adjustments

If you are using Typescript you may have to update your tsconfig.json file in to avoid problems with import aliasing.

If you are experiencing an error that is similar to TS2307: Cannot find module '@spectrumrjsf1/material-ui/v4' or its corresponding type declarations. you can add the following:

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@spectrumrjsf1/material-ui/*": ["node_modules/@spectrumrjsf1/material-ui/dist/*"]
    }
  }
}

Jest configuration adjustments

If you are using Jest you may have to update your jest.config.json file in to avoid problems with import aliasing.

If you are experiencing an error that is similar to Cannot find module '@spectrumrjsf1/material-ui/v4' from '<file path>' you can add the following:

{
  "moduleNameMapper": {
    "@spectrumrjsf1/material-ui/v4": "<rootDir>/node_modules/@spectrumrjsf1/material-ui/dist/v4.js"
  },
}

Material UI version 5

import Form from "@spectrumrjsf1/material-ui/v5";

import { withTheme } from "@spectrumrjsf1/core";
import Theme from "@spectrumrjsf1/material-ui/v5";

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

const Form = withTheme(Theme);

Typescript configuration adjustments

If you are using Typescript you may have to update your tsconfig.json file in to avoid problems with import aliasing.

If you are experiencing an error that is similar to TS2307: Cannot find module '@spectrumrjsf1/material-ui/v5' or its corresponding type declarations. you can add the following:

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@spectrumrjsf1/material-ui/*": ["node_modules/@spectrumrjsf1/material-ui/dist/*"]
    }
  }
}

Jest configuration adjustments

If you are using Jest you may have to update your jest.config.json file in to avoid problems with import aliasing.

If you are experiencing an error that is similar to Cannot find module '@spectrumrjsf1/material-ui/v5' from '<file path>' you can add the following:

{
  "moduleNameMapper": {
    "@spectrumrjsf1/material-ui/v5": "<rootDir>/node_modules/@spectrumrjsf1/material-ui/dist/v5.js"
  },
}

Roadmap

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

Contributing

Read our contributors' guide to get started.

Contact

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

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