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;