(MUI 5) 样式组件在浏览器中引发错误 theme.palette[ownerState.color] 未定义

Question

我在使用最新版本的 Mui 时遇到问题。我正在使用主题更改文本字段输入的默认样式，错误代码与“./node_modules/@mui/material/FormLabel/FormLabel.js/FormLabelRoot<”有关，我有以下依赖项“@emotion/react”：“^11.4.1”，“@emotion/styled”：“^11.3.0”，“@mui/icons-material”：“^5.0.1”，“@mui/material” ：“^5.0.1”，

如果有人有想法，我很想听听:)

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解决了他们的问题，但对于像我这样有类似问题的人，一定要检查这几件事。自从我将代码库升级到最新版本的 Material UI 以来，我遇到了这些问题。

当您使用给定组件中不支持的color或prop 值（通常为、 或 ）时，就会出现此问题。variantButtonIconButtonTextField

以前color="default"很好，但我意识到default不再支持了。它当前的等价物是inherit.

如果您想支持自定义颜色，您可以创建theme支持该颜色的颜色。阅读此处：添加新颜色(mui.com)