MUI Dark Theme with JSONForms

General
1

Hi,
I’m trying to style JSON forms based on MUI

import { ThemeProvider, createTheme } from '@mui/material/styles';
const theme = createTheme({
    palette: {
        type: 'dark', mode: 'dark'
    }
});
const renderers = [
    ...materialRenderers
];

<ThemeProvider theme={theme}>
    <ScopedCssBaseline>
        <JsonForms
            schema={this.state.schema}
            uischema={this.state.uiSchema}
            data={this.state.data}
            renderers={renderers}
        />
    </ScopedCssBaseline>
</ThemeProvider>

but I get only a black background.

Снимок экрана 2022-05-23 в 19.24.17
Снимок экрана 2022-05-23 в 19.24.171516×708 49.1 KB

How can I style my forms?

2

Hi @Berlizov,

which version of JSON Forms are you using? Did you try with the latest beta release?

3

Tried 2.5.2. Upgrading to 3.0.0-beta.2 fixed it, thanks

4

Makes sense. JSON Forms 2.5.2 still uses Material UI v4 which is probably incompatible with the ThemeProvider from Material UI v5.