I aim to create a custom MUI accordion which should look like this: Now, I have attempted in creating this custom MUI accordion using these code structure (this accordion also uses some custom search box functionality and custom accordion data)…
I meet this issue using MUI Autocomplete component :(https://i.stack.imgur.com/q8YDj.png)(https://i.stack.imgur.com/ZzDox.png). The popper sometimes appear on the left, sometimes on the right of the text input, there is my code : <ThemeProvider theme={theme}> <Autocomplete disablePortal={true} id="combo-box-demo" options={technologies} sx={{ width: 300 }} className="nodrag"…
The documentation of Mui states When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible. This behavior is very inconvenient for the responsive pages I am writing since menus…
I created a custom Alert as shown below, but when I add Snackbar, it is not displaying. Here is the part that I changed, the rest is the same: AlertPopup: const AlertPopup = () => { const { text, type…
import React, { useState } from "react"; import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; export default function DetailedAccordion() { const [expanded, setExpanded] = useState(null); const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded…
I have this wrapper component for the mui Tooltip component with the added functionality that it automatically closes the tooltip when the table around it is being scrolled. The code works well but I want to improve the code quality…
I'm trying to upgrade MUI v4 to MUI v5, and I've read the docs in migrating to v5 here. I get this error message when running npm update npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree…