How to customize style

[mjozan]

Hello,

It may be a simple question but can somebody show me how to change some simple style like the color of a checkbox? Thank you for your answer.

[tisdadd]

Hello, I have been using the Material-UI Theming for my own project to do so. I have set up the following example on code sandbox. It includes a bit extra, in case you need a starting point for other things.

import React from "react";
import "./styles.css";

import { ThemeProvider, createMuiTheme, Button } from "@material-ui/core";

import MuiForm from "@rjsf/material-ui";

const theme = createMuiTheme({
  palette: {
    secondary: {
      main: "#263238",
      light: "#4f5b62",
      dark: "#000a12"
    },
    primary: {
      main: "#212121",
      light: "#484848",
      dark: "#000000"
    }
  },
  props: {
    MuiTextField: {
      variant: "filled"
    },
    MuiSelect: {
      variant: "filled"
    },
    MuiInputLabel: {
      variant: "filled"
    },
    MuiButton: {
      variant: "contained"
    },
    MuiCheckbox: {
      color: "primary"
    }
  },
  overrides: {
    MuiInputBase: {
      input: {
        color: "red"
      }
    }
  }
});

const simpleSchema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuckie"
    },
    lastName: {
      type: "string",
      title: "Last name"
    },
    age: {
      type: "integer",
      title: "Age"
    },
    bio: {
      type: "string",
      title: "Bio"
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10
    },
    checkBox: {
      type: "boolean",
      title: "A random checkbox"
    }
  }
};

export default function App() {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <MuiForm schema={simpleSchema}>
          <div>
            <Button color="primary" type="submit">
              Submit
            </Button>
          </div>
        </MuiForm>
      </ThemeProvider>
    </div>
  );
}

This method still requires a lot of digging through the docs initially, but keeps everything uniform.

For further customization, you can still make custom widgets and fields as needed, using uiSchema to pass it in.