Hey all! This is my first time trying JSONForms but I really want to change the way input fields are rendered by setting their ‘variant’ option and so on.
I tried following the theming documentation here: Controls - JSON Forms
But that just causes the React app to throw errors in the console.
Anybody have an idea?
[original thread by Octopixell]
[Octopixell]
If I copy the values from the docs these error appear…
HI @octopixell(octopixell), in general all options should work 
Can you post the schema, uischema and code which produced these errors?
[Octopixell]
I only use a schema for now, no uischema:
{
"type": "object",
"properties": {
"magazineId": {
"type": "number",
"description": "The ID of a magazine"
},
"publicKey": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"clientName": {
"type": "string",
"description": "The name of the client's app"
},
"config": {
"type": "object",
"properties": {
"server": {
"type": "object",
"properties": {
"ows": {
"type": "object",
"properties": {
"domain": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"clientId": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"clientSecret": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"audience": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
}
}
},
"auth0": {
"type": "object",
"properties": {
"endpoint": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"integration": {
"type": "object",
"properties": {
"endpoint": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
},
"psk": {
"type": "string",
"description": "The public key necessary to verify platform tokens"
}
}
}
}
}
}
},
"client": {
"type": "object",
"properties": {
"supportEmail": {
"type": "string",
"description": "The email address used in error messages"
},
"navigation": {
"type": "object",
"properties": {
"tabs": {
"type": "object",
"properties": {
}
},
"menu": {
"type": "object",
"properties": {
}
}
}
},
"teamSchedule": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"description": "The email address used in error messages"
}
}
},
"availability": {
"type": "object",
"properties": {
"default": {
"type": "string",
"description": "The default availability"
}
}
},
"schedule": {
"type": "object",
"properties": {
"locationLink": {
"type": "string",
"description": "If a link is entered here it will replace the shift location/address links"
}
}
}
}
}
}
}
}
}
[Octopixell]
Some duplicate copy pasted descriptions in there but that shouldn’t be an issue
[Octopixell]
const jsonFormsTheme = { jsonforms: { input: { background: ‘#f44336’ } } }
[Octopixell]
<ThemeProvider theme={jsonFormsTheme}>
<JsonForms
schema={schema}
// uischema={uiSchema}
data={magazineConfig}
renderers={materialRenderers}
cells={materialCells}
/>
</ThemeProvider>
[Octopixell]
That should be all, right?
[Octopixell]
I wonder why the form elements output by JSONForms doesn’t simply listen to themes created using createMuiTheme actually. Any reason it ignores actual Material UI Themes?
The ThemeProvider is just the regular one of Material UI and all rendered controls can also just be styled with the usual Theme mechanism of Material UI.
The problem is that the docs for the input delete background styling are wrong, i.e. the createMuiTheme is missing. Therefore the code could should be:
const myTheme = createMuiTheme({ jsonforms: { input: { delete: { background: '#f44336' } } } });
Note that this is the only special styling we use for the forms and it is also only required when you are unsatisfied with the background of the delete adornment being palette.background.default.
[Octopixell]
Hmm
[Octopixell]
That wont work
[Octopixell]
jsonforms isn’t a known property of the createMuiTheme options 
[Octopixell]
But why don’t JSONForms inputs simply listen to a MUI Theme like this:
const muiTheme = createMuiTheme({
props: {
MuiTextField: {
variant: 'filled'
}
}
})
[Octopixell]
If I just have a normal input outside of JSONForms it listens to the theme… Inputs from JSONForms don’t…
[Octopixell]
I’m not sure if it’s supposed to be like that or whether it’s a bug I’m running into @sdirix(sdirix)