Example of a big configuration for theme and Textfield in material ui (react) - (font and colors)

customize materia ui

```
const primaryColor = "#15C3B2";
const secondaryColor = "#227C9D";
const theme = createMuiTheme({
  palette: {
    primary: {
      main: primaryColor, //"#49cbdc",
    },
    secondary: {
      main: secondaryColor, // "#ff4081",
    },
  },
  typography: {
    fontFamily: [
      "Gilroy-Medium",
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
  },
  overrides: {
    MuiTextField: {
      root: {
        "& input": {
          WebkitBoxShadow: "0 0 0 1000px white inset",
          WebkitTextFillColor: secondaryColor,
        },
        "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
          borderColor: primaryColor,
        },
        "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
          borderColor: primaryColor,
          borderWidth: 1,
        },
        "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
          borderColor: primaryColor,
          borderWidth: 1,
        },
        "& .MuiOutlinedInput-input": {
          color: primaryColor,
        },
        "&:hover .MuiOutlinedInput-input": {
          color: primaryColor,
        },
        "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
          // color: "purple",
        },
        "& .MuiInputLabel-outlined": {
          color: primaryColor,
        },
        "&:hover .MuiInputLabel-outlined": {
          // color: "red",
        },
        "& .MuiInputLabel-outlined.Mui-focused": {
          // color: "purple",
        },
      },
    },
  },
});
```