Changing form's font style

General
1

I’m trying to change the form styling for example its color and maybe font type or even form’s background color. Is there a way to do that in the json uischema?
My project is in React.

[original thread by patrickklze]

2

If you’re using the material renderers then the easiest way to do so is Material Ui’s theme support. Just wrap JsonForms with your own theme and all rendered inputs will be rendered accordingly.

3

[patrickklze]

Hi @sdirix(sdirix),

i have tried the Material ui Theming way but it doesn’t seems to adopting it

Here’s an example of my code, where i tried to set the form to a black background with white front theme, but only the are adopting however the form is not.

import React, { useState }from 'react';
import {
    materialRenderers,
    materialCells
  } from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
import schema from '../schema.json';
import uischema from '../uischema.json';
import Button from '@material-ui/core/Button';
import './jsonformfunc.css';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const data:any = {

};

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#000000',

        },
        secondary: {
            main: '#000000',
        },
    },
});

export default function JsonFormFunc(props: any) {
    const [standaloneData, setStandaloneData] = useState(data);

    const onClickHandler = () => {
        console.log(standaloneData)
      }

    return (
        <ThemeProvider theme={theme}>
            <div color="primary">
                <JsonForms
                    schema={schema}
                    uischema={uischema}
                    data={standaloneData}
                    renderers={materialRenderers}
                    cells={materialCells}
                    onChange={({ errors, data }) => setStandaloneData(data)}
                />
                <div className="middle-middle">
                    <Button variant="contained" color="secondary" onClick={onClickHandler}>Submit</Button>
                </div>
            </div>
        </ThemeProvider>
   )
  }
4

[patrickklze]

Here’s a screenshot to my above comment for better understanding of the problem i am facing

5

[patrickklze]

998×520 30.6 KB

6

To properly apply all colors from the theme you also need to include the CssBaseline. For example this is the most straightforward way for a dark theme:

const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

<ThemeProvider theme={theme}>
  <CssBaseline />
  <JsonForms/>
</ThemeProvider>
7

Not related to this issue: I see that you are feeding the outputData from JSON Forms back into JSON Forms. At the moment this is discouraged as JSON Forms will see this as a change of the data prop and trigger a rerender. In one of the future versions we’ll probably add a check to avoid this but for now you should just store the output in a separate state variable or in a ref.

8

[patrickklze]

HI @sdirix(sdirix),

I have tried the CssBaseline tag and it worked!
Thank you for the guidance!
About the outputData from JSON Forms back into JSON Forms, it wasn’t my intention but actually i was trying to see if i can save the changes of the form into a local variable.

Would it be better if i just default it as this instead?

import React, { useState }from 'react';
import {
    materialRenderers,
    materialCells
  } from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
import schema from '../schema.json';
import uischema from '../uischema.json';
import Button from '@material-ui/core/Button';
import './jsonformfunc.css';
import { createMuiTheme, ThemeProvider} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
const data:any = {

};

const iniData:any = {
    title: "Movie Title Example",
    title_description: "Movie Title Description"
}

const theme = createMuiTheme({
    palette: {
      type: 'dark',
    },
  });

export default function JsonFormFunc() {
    const [standaloneData, setStandaloneData] = useState(data);

    const onClickHandler = () => {
        console.log(standaloneData)
      }

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
                <JsonForms
                    schema={schema}
                    uischema={uischema}
                    data={iniData}
                    renderers={materialRenderers}
                    cells={materialCells}
                    onChange={({ errors, data }) => setStandaloneData(data)}
                />
                <div className="middle-middle">
                    <Button variant="contained" color="secondary" onClick={onClickHandler}>Submit</Button>
                </div>
        </ThemeProvider>
   )
  }
9

That’s perfectly fine!