Styling MuiForms

There are mainly two ways to customize and style metaforms:

Using css styles
Using ThemeProvider

Css Styling

Each field in the MuiForm contains a unique classname by default:

    <div class="...meta-form-<field_name>..."

Above css class name can be used for styling. For a custom classname, the property className can also be used in the json schema.

Theme provider

This is the standard way of theming Mui components.

import { createTheme, ThemeProvider } from "@mui/material";
import MuiForms from "mui-forms";
 
const THEME = createTheme({
     palette: {
        primary: {
            main: "rgb(46,51,54)"
        }
    },
    typography: {
        fontSize: 12
    },
    components: {
        MuiTextField: {
            ...
        },
        ...
    }
});
 
function MyForm() {
    return (
        <ThemeProvider theme={THEME}>
            <MuiForms {...props} />
        </ThemeProvider>
    )
}

Check here (opens in a new tab) for more details.

Basic example

Rounded input fields and buttons

Use MUI createTheme to customize input fields through ThemeProvider. For form buttons, use the className property inside a button's meta object to apply Tailwind classes.

import { createTheme, ThemeProvider } from "@mui/material";
import MuiForms from "mui-forms";
 
const roundedInputTheme = createTheme({
    components: {
        MuiOutlinedInput: {
            styleOverrides: {
                root: {
                    borderRadius: 24
                }
            }
        },
        MuiButton: {
            styleOverrides: {
                root: {
                    borderRadius: 24,
                    paddingTop: 10,
                    paddingBottom: 10
                }
            }
        }
    }
});
 
function MyForm() {
    return (
        <ThemeProvider theme={roundedInputTheme}>
            <MuiForms schema={schema} onSubmit={handleSubmit} />
        </ThemeProvider>
    );
}

Rounded Fields Example

Schema

{

fields

[

{

name

"full_name"