How can I supply custom material theme to material ui

General
1

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]

2

[Lily]

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 />
      </MuiThemeProvider>
3

[Lily]

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 https://github.com/mui-org/material-ui.git
cd material-ui/docs
yarn && yarn start
open http://jsonforms.discourse.group

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.

4

[shivgarg5676]

Thanks @lilyh I will try this out.