Error message in browser says "MUI 5 styled components encountering issue with undefined theme.palette[ownerState.color]"

Encountering an issue with the latest Mui version. Utilizing a Theme to customize the default styling of a text field input. The error seems to be related to "./node_modules/@mui/material/FormLabel/FormLabek.js/FormLabelRoot". Here are the dependencies listed: "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", "@mui/material": "^5.0.1",

If you have any insights, please share! :)

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: {
        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 >
          
            <Grid container spacing={3} >
            
              <Grid item>

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

              </Grid>

              
              

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

          </ThemeProvider>


        

        
      


      

    

        



      




    </>

  );
}

export default App;

Answer №1

After finding a solution to their issue, the original poster provided some helpful tips for others facing similar problems. It seems that upgrading to the latest version of Material UI caused some issues.

The problem arises when using unsupported values for the color or variant props in components like Button, IconButton, or TextField.

Previously, setting color="default" worked fine, but it turns out that default is no longer supported. The new equivalent is inherit.

If you need to use a custom color, you can define a theme that accommodates it. More information can be found here: Adding new colors (mui.com)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js error: exceeding parameter limit encountered during bulk data upload

I've been tasked with uploading user data in bulk via a CSV file. I'm utilizing nodejs along with the express framework. Everything works smoothly when I upload a CSV file with 60 to 70 rows, but once it exceeds 70 rows, I start encountering a se ...

How can we set a default value for TimePicker with redux-form and materialUI?

I'm having trouble getting any version of setting a defaultValue (or defaultTime or even just value) to work for initializing a TimePicker in redux-form from state. Every other field populates correctly, but the date/time pickers don't seem to re ...

Is it possible to use JavaScript to append elements with a fade-in effect

I'm looking to add an element with a fade-in animation to another class using JavaScript. Can anyone provide guidance on how to achieve this? Here is what I've tried: success:function(data){ $(".new_posts").append(data); $(".new ...

Can you explain the functionality of the Json onLoad method and how can I use it to send a response?

function MakeJsonRequest() { JsonRequest.setRequestHeader("Content-type", "application/json"); JsonRequest.send(Data); JsonRequest.onload = function() { ProcessJsonResponse(this.responseText); } } // The Som ...

Changing the input programmatically does not trigger an update in the Angular model

I am currently facing a challenge where I have a text input that is connected to a model value in my application. However, I am struggling to programmatically change the input value and ensure that this change reflects in the model. My understanding is th ...

Browser tries to interpret Javascript code as a file organization system

Encountering an issue while trying to load my website. When I open index.html in my browser, I receive a problem loading page message. This response is puzzling as it does not indicate a file loading error. Here's a snippet of the response: Firefox c ...

Encountering issues with MongoDB search functionality - the collection.find() method does not support sorting

I'm facing a challenge where I need to search for a specific string in one field and then sort the results based on another field. Below is the Node.js function I am using, along with the error that is being displayed: router.get("/getappts/:user ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

Testing a React component's function within the confines of a Redux Provider component

My current challenge involves unit-testing a React component called TodoList. This component essentially maps through items and displays them in the render method. These items, of type TodoItem, are retrieved from the Redux store using MapStateToProps. Be ...

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...

How to disable form submission using ENTER key in jQuery when alerts are present?

My form contains a text input field. To prevent the form from being submitted when ENTER key is pressed, I used this code snippet: jQuery("#inputTags").keydown(function(event) { if (event.keyCode == '13') { event.preventDefault() ...

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

Creating dynamic HTML tables within Highcharts

I need assistance with a webpage I'm working on where tables are dynamically added and removed using checkboxes in HTML. Essentially, when a checkbox is checked, a table is added, and when it's unchecked, the table is removed. My goal is to displ ...

Using React to establish communication between sibling components

Hey there, I'm a beginner in React and recently created a small application with a single form to practice my skills. This app includes 4 components apart from the App.js file. My main challenge is getting my Checkbox.js component to communicate with ...

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

Should I consider extracting the shared parts of similar pages into components when styling in React, or is it better to just share style sheets?

My website has two pages - a character page and a staff page, both of which look very similar. However, due to different data structures and minor differences, I am unable to separate the logic with view and reuse it across both pages. This made me conside ...

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

Display my additional HTML content on the current page

Is it possible for my addon to open a predefined html page in the current window when it is started? And if so, how can this be achieved? Currently, I am able to open my addon page in a new window using the following command: bridge.boot = function() { ...

Analyzing the list of paths that are passed to the function

I am looking for assistance in creating an asynchronous "getTypes" function that can analyze a list of paths and return an array describing the type of content in each path. The function should handle all cases efficiently and in case of any errors during ...