(MUI 5) styled Componants throwing error in browser theme.palette[ownerState.color] is undefined

Question

I'm having an issue with the latest version of Mui. I'm using a Theme to change the default styling of a text field input the error code has something to do with "./node_modules/@mui/material/FormLabel/FormLabel.js/FormLabelRoot<" I've got the following dependencies "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", "@mui/material": "^5.0.1",

If anyone has an idea I'd love to hear it :)

import React, { useState } from "react"
import { Button, createTheme, Grid, TextField, Tooltip } from "@mui/material"
import { ThemeProvider } from "@mui/system"
import { AddRounded, CalendarToday, Phone, Email, SearchOutlined, People, Work } from "@mui/icons-material"

import { orange } from "@mui/material/colors"

function App() {
  //logic
  const [contacts, setContacts] = useState([])

  const [addFormData, setAddFormData] = useState({
    name: "", email: "", phone: "", dateCreated: "", area: ""
  })



  /* search reflects the value of the googleesque, search bar. */
  const [search, setSearch] = useState("")
  /* refrlcts the  */
  const [searchResults, setSearchResults] = useState([])

  const handleAddFormChange = (e) => {
    e.preventDefault()
    const fieldName = e.target.getAttribute("name")
    console.log(fieldName)
    let fieldValue = e.target.value
    console.log(fieldValue)
    const newFormData = { ...addFormData }
    newFormData[fieldName] = fieldValue
    setAddFormData(newFormData)
  }

  const handleAddFormSubmit = (e) => {
    e.preventDefault()

    const newContact = {

      name: addFormData.name,
      email: addFormData.email,
      phone: addFormData.phone,
      dateCreated: addFormData.dateCreated,
      area: addFormData.area,
      split: addFormData.split
    }

    const newContacts = [...contacts, newContact]
    setContacts(newContacts)

  }

  const handleSearch = (e) => {
    e.preventDefault()
    setSearch(e.target.value)

    if (search !== "") {
      const newContactList = contacts.filter((contact) => {
        console.log(Object.values(contact).join(" ").toLowerCase())
        return Object.values(contact).join(" ").toLowerCase().includes(search.toLowerCase())

      })
      console.log(search)
      console.log(Object.values(contacts).join(" ").toLowerCase())
      setSearchResults(newContactList)

    } else {
      setSearchResults(contacts)
    }
  }



  const theme = createTheme({
    palette: {
      primary: {
        // Purple and green play nicely together.
        main: orange[500],
      },

    },
  });
  return (
    <>

      <ThemeProvider theme={theme}>


        <Grid container spacing={1} alignItems="center" >

          <Grid item>
            <SearchOutlined />

          </Grid>

          <Grid item style={{ marginBottom: "15px", marginTop: "15px" }} >
            <TextField type="text" variant="outlined" label="Search" onChange={handleSearch} />
          </Grid>

        </Grid>


        <div >
          {/* Main Container with soacing between pairs set to (3) */}
          <Grid container spacing={3} >
            {/* First pair, people icon + name input */}
            <Grid item>

              <Grid container spacing={1} alignItems="center">
                <Grid item>
                  {/* icon */}
                  <Tooltip title="Name" placement="bottom" arrow>
                    <People />
                  </Tooltip>
                </Grid>
                <Grid item>
                  {/* input */}
                  <TextField label="Name" variant="outlined" id="name" name="name" type="text" onChange={handleAddFormChange} />
                </Grid>
              </Grid>

            </Grid>

            {/* Second pair */}
            <Grid item>

              <Grid container spacing={1} alignItems="center">
                <Grid item>
                  {/* icon */}
                  <Tooltip title="what's your name" placement="bottom" arrow>
                    <Work />
                  </Tooltip>
                </Grid>
                <Grid item>
                  {/* Input */}
                  <TextField label="Area" variant="outlined" color="colME" id="area" name="area" type="text" onChange={handleAddFormChange} />
                </Grid>
              </Grid>

            </Grid>

            {/* Third Pair */}
            <Grid item>

              <Grid container spacing={1} alignItems="center">
                <Grid item>
                  {/* Icon */}
                  <Tooltip title="name@example.com" placement="bottom" arrow>
                    <Email />
                  </Tooltip>
                </Grid>
                <Grid item>
                  {/* input */}
                  <TextField label="Email" variant="outlined" id="email" name="email" type="text" onChange={handleAddFormChange} />
                </Grid>
              </Grid>

            </Grid>

            <Grid item>

              <Grid container spacing={1} alignItems="center">
                <Grid item>
                  {/* Icon */}
                  <Tooltip title="Ex:(0049)15208513630" placement="bottom" arrow>
                    <Phone />
                  </Tooltip>
                </Grid>
                <Grid item>
                  {/* Input */}
                  <TextField label="phone" variant="outlined" id="dateCreated" name="phone" type="text" onChange={handleAddFormChange} />
                </Grid>
              </Grid>

            </Grid>

            <Grid item>

              <Grid container spacing={1} alignItems="center">
                <Grid item>
                  {/* Icon */}
                  <Tooltip title="Format:dd/mm/yyyy" placement="bottom" arrow>
                    <CalendarToday />
                  </Tooltip>
                </Grid>
                <Grid item>
                  {/* Input */}
                  <TextField label="Date" variant="outlined" id="dateCreated" name="dateCreated" type="text" onChange={handleAddFormChange} />
                </Grid>
              </Grid>
            </Grid>





          </Grid>


          <Button style={{ marginBottom: "15px", marginTop: "15px", }} onClick={handleAddFormSubmit} variant="contained" startIcon={<AddRounded />}>
            Add
          </Button>
        </div>

      </ThemeProvider>


      {/* if there less than 1 character in the search bar render the normal contacts, if not render only the contacts that match the search input...  */}


      {/*  <ContactList contacts={search.length < 1 ? contacts : searchResults} key={contacts.id} /> */}



    </>

  );
}

export default App;

Answer 1

OP solved their problem, but for those like me that had a similar issue, be sure to check these few things. I'm experiencing these issues since I've upgraded our code-base to the latest version of Material UI.

The issue appears when you use a color or variant prop value not supported in a given component, usually Button, IconButton, or TextField.

Previously color="default" was just fine, but I realized that default was no longer supported. It's current equivalent is inherit.

If you want to support a custom color, you can create a theme that supports that. Read here: Adding new colors (mui.com)