Using MUI V5, how can I pass a custom style to a button component? Here is what I have been trying to merge the old way with the new MUI v5 but it’s not working. Now I would like to call this Button and give it color=”secondary” Answer It looks like your code was an attempt to migrate from c…
Tag: material-ui
React MUI Datagrid align column data and header with type “number”
I’m using MUI in my react project. When I set the type of a column to type: “number” the column header and data align to the right. I reproduced the issue at the simple example from MUI documentation: codesandbox The third column age has type: “number” and everything alignes to t…
ReactJS: [Home] is not a component. All component children of must be a or
I am trying to navigate to “/quiz” when Start Quiz button is clicked. However when I compile my code I am getting the following error on the website application: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> I am…
How do I handle undefined state in react when the user hits cancel on file selection?
I have a simple Input type= file. I am capturing the the selected file in state. Once a file is selected and the clear button is clicked it does not clear the state. This causes {selectedFile.name} to throw an undefined error when the user clicks cancel during the next file selection. Is there a way to make m…
React Firebase deleting the wrong document id
I’ve been trying to make a delete operation on a firebase database using Reactjs. I’ve got a bug with my function grabbing the wrong id from firebase. I have a button that calls a handleOpen function which opens a Modal. Modal operations: I’ve got a button that calls a handleDelete function …
Place text on Box Component of Material UI
I want the hover functionality to happen (UI) which is happening in this case: Desired UI Source: https://www.loewshotels.com/santa-monica Now since modifying background image styles is a bit complicated, I have to use the Box Component from Material UI and in it, I have placed the image and also done the des…
Module not found: Can’t resolve ‘@mui/icons-material/FileDownload’
I have installed both @material-ui/core and @material-ui/icons. I am trying to import “FileDownloadIcon” from Material icons. Installing “@material-ui/core”: Installing “@material-ui/icons”: This is the way I am trying to import “FileDownloadIcon”: But it’…
React MUI: Matching the heights of two grid sections
Using MUI have two separate grids next to each other, both taking up 50% of a larger grid. As seen in the image below, I am having a hard time matching the heights of the two sections. I would like the smaller grid items (cards) to dynamically fill in the height of the left portion and match the height of
Add custom style inside DataGrid Toolbar’s popup component Material-UI
I’m creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI. Here is the official example for the Grid Toolbar components: If we click one of the Grid Toolbar components, it will show a popup/popper as seen in the screenshot below. What I want to do i…
Add Tooltip over a button
I’m trying to create a button which copies into clipboard content from variable using TypeScript and Material-UI. I tried this: Button to call above code: Do you know how I can add Tooltip https://mui.com/components/tooltips/ over the button to display message for successful copy when the text is copied…