menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

How can I supply custom material theme to material ui.

August 9, 2019 at 3:16pm

How can I supply custom material theme to material ui.

August 9, 2019 at 3:16pm
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

August 9, 2019 at 5:12pm
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>
Edited
like-fill
2
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://localhost:3000
There's an open issue for upgrading material-ui version and contibutions to the project are welcome https://github.com/eclipsesource/jsonforms/issues/1464
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.

MuiThemeProvider vs ThemeProvider

message-simple
26
Edited

August 10, 2019 at 2:41am
Thanks I will try this out.