How can I supply custom material theme to material ui

Hi, I am using json form with material renderers on my react web app. Is there any way I can pass a custom material theme to json form so that I can make its design consistent with my web app’s design language

[original thread by shivgarg5676]


Hi, you can use MuiThemeProvider

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles"

const palette = {
  primary: { main: "#FFF", contrastText: "#000" },
  secondary: { main: "#000", contrastText: "#FFF" }

const theme = createMuiTheme({ palette })
const App = ({}) =>
      <MuiThemeProvider theme={theme}>
            <JsonForms />


Material-ui in current release of JSON Forms is 4.0.1, this caused me issues because material-ui docs online are for v4.3.1.

I ran a copy of the 4.0.1 docs locally

git clone
cd material-ui/docs
yarn && yarn start

There’s an open issue for upgrading material-ui version and contibutions to the project are welcome

Also I’m not sure if it’s possible to use new ThemeProvider api rather than MuiThemeProvider. I got it working with MuiThemeProvider so that’s the example I have.


Thanks @lilyh I will try this out.