Every time I try to search using the Search bar, I keep getting an error saying "cannot read property value". This is really strange because I have created many forms before without encountering this issue. Can someone please explain why this error is occu ...
Is there a way I can customize the appearance of the <span> tag that is produced when using the Checkbox component from the material-ui library? Essentially, I am seeking a method to alter: <span class="MuiButtonBase-root-29 MuiIconButton-root-2 ...
While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...
Currently, I have integrated two arrays into my autocomplete menu where the chip/tag color is either primary or secondary based on the array the selected component belongs to. I aim to include all four arrays in the menu (top10Songs, top10Artists, top10Fi ...
Is there a way to change the language of the DatePicker (months and days) in Material UI? I have attempted to implement localization through both the theme and LocalizationProvider, but neither method seems to work. Here are some resources I have looked a ...
Currently, I am utilizing Material UI in combination with Reactjs. One particular issue that I am encountering involves the Grid List Component. In my attempt to establish a grid of 1000x1000px, I have specified the height and width within the custom gridL ...
I am in need of an Autocomplete feature that offers the following functionalities: If the initial value has an id greater than 0, then I want the autocomplete to default to the provided object. If the initial value has an id less than or equal to 0, then ...
Encountered this log while deploying on Vercel: Installing dependencies... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @material-ui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...
When utilizing the Material UI Palette with Typescript, I am encountering a significant issue due to limited documentation on MUI v5.0 in this area. Deep understanding of typescript is also required. The objective is to iterate through the palette and vir ...
I am struggling to develop a user system as it is not working in real-time, causing confusion for me. To illustrate my problem and code, I have set up a sample Sandbox. Please note that this example does not include any validation features and is solely f ...
I am working on formatting my table in a specific way: EVENT ID EVENT NAME DATE LOCATION 12345678 Rolling Stones 01/01/2024 Merriweather Post Pavillion Rain or shine! No weapons or alcohol will be permitted 1234567 ...
Applying CSS styles to a <Switch disabled> element is my goal in order to achieve the following: Normal color appearance User interaction disabled I attempted to use CSS code for this purpose. Check out the demo sandbox here: https://codesandbox.i ...
New to coding and need some guidance. I'm attempting to create a card that is not the full width of the window. I have specified a cardStyle as shown below. cardStyle:{ width: '95vw' align? : 'center?' textAlign? : 'default or left or somethi ...
I'm facing an issue with displaying data in an HTML table using an API. I've tried to implement pagination to show 3 or 6 rows per page, but it's not working as expected. Currently, all the data is being displayed without any pagination, whe ...
Trying to incorporate a vertical Divider component within my Appbar in material-ui has proven to be quite challenging. Despite following a solution recommended on Stack Overflow, the issue persists and I am unable to resolve it: Adding vertical divider to ...
Following the documentation and various online resources for help, I've attempted to implement the latest code version without success. Feeling extremely frustrated at this point. const { control, handleSubmit } = useForm() The component being retur ...
I created two tabs inside a Paper element, but the SCORE tab is not aligned correctly. It appears too far to the right instead of adjusting its width to fit the Paper element. Why are the tabs not auto-adjusting their width? <Paper className={classe ...
My Layout HOC has a Grid with 4 Widget components as Grid items. I want them to display differently based on screen size: On large screens: all 4 should be in 1 row On medium screens: 2 in a row, 2 columns On small screens: 1 widget takes full width, spr ...
One of the new custom colors I've added to the palette is blue: const rawTheme = createMuiTheme({ palette: { primary: { light: '#7ED321', main: '#417505', dark: '#2B5101', contrastText: &apo ...
I am currently working on a ReactJS application that interacts with a rest API, and I am trying to use the MUI-datatables node package to display a list. However, I keep encountering the following error: 'TypeError: Cannot read property 'customBodyRender' ...
Currently, I am facing an issue with two fields on my form. The first field is an autocomplete feature while the second field is a textfield. By default, my second field is disabled but I need it to become enabled every time a user types and selects an opt ...
We have integrated MUI DataGrid into our React project. Currently, I am exploring options to save the state of columns after toggling their visibility using the DataGrid toolbar column menu. After each re-render, the column setup returns to its default st ...
Is there a way to style Material-UI Radio objects with a Button type appearance using only Material-UI components? If not, what would be the simplest alternative solution? Despite reading documentation and experimenting for days, I still haven't found a s ...
While working with material-ui, I've been following the guidelines and importing components using the method shown below: import Dialog from '@material-ui/core/Dialog'; import DialogTitle from '@material-ui/core/DialogTitle'; impo ...
I am currently utilizing the MUI DataGrid version 4 component. The desired functionalities are as follows: Allow multiple selections from the checkbox in the Data Grid (if the user selects multiple rows using the checkbox). Prevent multiple selections fr ...
In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect me to the correc ...
My goal is to center an IconButton within a DataGrid table, all of which are MUI components. Despite reading the documentation and trying various methods, I haven't achieved the desired result yet. In my latest attempt, I implemented the following: GridCo ...
I am currently facing an issue with my Collection component, which is utilizing a sub-component called RenderCollectionPieces to display UI elements. Strangely, I am able to see the data for image.name in the console but for some reason, the UI elements ar ...
Currently, within my NextJS project and utilizing MUI, I am attempting to define a fontWeight property using the theme settings in the makeStyles function. Oddly enough, this issue only arises when building inside a docker container, as building locally po ...
While working with React, I am facing a challenge of passing props from the instanced component into the mockFn function. The code example below is extracted and incorporates Material UI, but I am struggling on how to structure it in order to have access t ...
I am facing an issue with a loading overlay that uses the MUI Backdrop component. It works perfectly fine unless I have a MUI Dialog or MUI Drawer open. In such cases, the Backdrop component renders behind the Dialog or Drawer. I have tried adjusting the z ...
Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...
Utilizing Material-UI's TextField alongside react-hook-form to monitor inputs has raised an issue for me. I have observed that regardless of the input type, it always returns a string. This creates conflicts with the data types I am using in my codeba ...
After successfully adjusting the font size of the TextField in my Autocomplete, I encountered an issue. I also needed to adjust the font size of the dropdown menu. How can I achieve this? You can check out my CodeSandbox demo here. <Autocomplete cla ...
I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...
I am experiencing an issue with a simple program where I am trying to utilize a material UI search icon. Despite installing both material UI core and material UI icons, I am still unable to use them. Can someone kindly explain why? import React from 'react ...
In my setup, I have two React projects - Parent and Common project. The Common project contains common components like header and footer that are shared between multiple projects. In the Parent project, I have a material theme defined and configured using ...
When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...
Is there a way to store user data in the database as soon as the user changes screens? I'm currently working with React and Material UI Steppers. ...
I've been struggling with this issue for quite some time - I have checkboxes (50) rendered within a tab, and after checking them, switching tabs, and then going back, the value is stored but the checkbox loses its visual appearance. <Tabs value={selecte ...
I am currently working on my first React application. I have successfully imported a Material-ui button and customized it to my liking. Now, I would like to use this custom button in multiple components within my app, each time with different text. Where ...
I've been experimenting with Material UI while working on a project that required creating a TextField with a mask using react-imask: https://mui.com/en/material-ui/react-text-field/#integration-with-3rd-party-input-libraries However, when I tried using ...
I am struggling with passing the search query from my search file to my table file. The data for my datagrid table is retrieved from a database using an API call, and the table code is in one file while the search functionality code is in another file. I h ...
I've been working on a Next.js project and using the 'app' router to create a consistent layout for all pages. As part of handling responsive design, I incorporated Material-UI (MUI) and its useMediaQuery hook. However, when loading a page, ...
For a project, I created a sample using React.js and Material UI. Here is the link to the project: https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js Now, I am attempting to recreate the same sample using Angular and Material, ...
Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%", ...
Exploring Material UI has been an exciting journey for me as a newcomer! However, I am facing a challenge in adjusting the width of each tab panel/label to ensure all three labels are visible at once. Currently, the last label, Upload, is extending beyond ...
I'm feeling a bit lost when it comes to using the children property of the badge component. Check out an example here: badge example The documentation mentions: children: The badge will be added relatively to this node. Could someone provide me wi ...
I'm currently exploring the integration of Formik with a MaterialUI Select component. You can find my sandbox project here: https://codesandbox.io/s/lively-wind-75iliv?file=/src/App.tsx After selecting a new value from the dropdown list, I've n ...
I want to incorporate components from https://material-ui.com/ within shadow DOM, but I'm struggling with injecting those styles into the shadow DOM. The default behavior of material-ui, which utilizes jss internally, is to inject styles in the head o ...
Encountering a unique problem I've never faced before. Utilizing Material UI components, specifically using CardActionArea in conjunction with Redirect from react-router-dom When the user clicks on the CardActionArea, the intention is to direct them to ...
Looking to enhance user experience, I aim to display a filter bar when my Datagrid component is generated. Upon creation, users should immediately see the Datagrid with the filter option visible (as though the filtering button has been clicked). https://i ...
I am attempting to set a minimum date for the picker to start from, but it does not seem to be working as expected. <TextField id="date" type="date" defaultValue="2017-05-24" minDate="24/01/2019" ...
Below is the code I have created for a ListView.builder to display 4 elevated buttons in a container with axis.horizontal. When clicking on the container, it should navigate to another page. Additionally, I have set up a list to retrieve data from each c ...
I'm currently developing a form with a date field utilizing MUI and react-hook-form for validation. I have experimented with two different methods of rendering the field, but when I try to submit the form, the expected value is not being returned: Me ...
Apologies for the lengthy post, although it appears long because of the images. I aim to achieve a layout similar to this: https://i.stack.imgur.com/kuX6Tm.png To create this layout, I used the following code snippet: <?xml version="1.0" encoding="u ...
I recently created a preact-cli app and added the following code in Header.js: document.body.classList.add('mdc-theme--dark'); However, when a user tries to switch from the light theme to the dark theme, only the background of the app changes. I've notic ...
After using Material-UI to create navbar.js, I encountered an issue where the other component was not rendering in the <Outlet/> Component RootLayout.js import { Outlet } from "react-router-dom"; import NavBar from "../component/NavBa ...
I have a card component with a clickable icon button inside it. I want to be able to click the icon button without triggering the ripple effect on the whole card. Currently, clicking the icon button causes the ripple effect to run on the entire card. Howe ...
I have a Select Input with option list containing values. I need to store these values in my state so that I can later dispatch them to my Redux state. While I have successfully saved the values in the state, the name of the selected option is not being di ...
Whenever there is an error from an API while a user is registering, an alert is displayed on the form page. To handle this, an Alert component was created: <Snackbar open={open} autoHideDuration={9000} onClose={() => { setOpen(f ...
When working with the MUI library in React Native, I encountered an issue: ERROR Invariant Violation: View config getter callback for component style must be a function (received undefined). Make sure to start component names with a capital letter. I ha ...
I have multiple "tasks" with individual sets of tabs that I want to organize. Each tab within the TabPanel contains a TaskOrg component responsible for fetching data from the backend through API calls and displaying it in a DataGrid. The issue arises when ...
I am experiencing an issue with a file that is supposed to display a table of data pulled from a database. Although the table does appear, all the data seems to be displayed under the ISSUE NUMBER column, instead of being aligned with their respective col ...
In my React project, I have integrated the Autocomplete component from Material-UI to enhance user experience. However, when attempting to pass a large dataset of 10,000 items to the Autocomplete component as a prop, there is a noticeable delay of approxim ...
Struggling to find a way to direct the user back to the Home component after logging out. The API functionality has been tested and is working properly. I'm unsure how to properly implement the logout method in the current context to allow for successful ...
As someone new to React, I recently embarked on my journey by creating a test project utilizing MUI Table, and so far it's been a success: https://i.stack.imgur.com/clb4p.png However, I am now looking to incorporate pagination and sortable columns when p ...
Utilizing redux-form, I have passed the TextField of material-ui as a prop to Field of redux-form. Everything else seems to be working perfectly as expected. <Field id="firstName" name="firstName" floatingLabelText="Username" errorText= ...
I'm currently working on creating a gender-switching feature where users can select their gender and receive the corresponding form. I already have the forms set up as components, and they display correctly when I manually set the gender. However, my cha ...
Issues with MaterialUI Tooltip causing warnings in client console "Failed prop type". However, the mentioned props are not used in my components. Warnings displayed on client console: Warning: Failed prop type: The following properties are not supported: ...
Currently, I am working on a React application with Typescript and using Formik along with Yup validation. However, I have encountered an issue with setting values in a Select element. It seems that the value is not changing at all, or it may be resettin ...
Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...
I am working with the material-table and I want to incorporate colspan and rowspan in it. Despite searching for examples and samples, I have not found anything relevant. Currently, this is how I am structuring the material table: <TableHead> &l ...
The documentation of Material UI's ImageList component provides a tutorial on how to include a single actionIcon in the ImageListItemBar. Here is an example borrowed from their code, along with a visual representation to demonstrate where the actionIcon (t ...
I have just started learning reactjs and I am facing an issue while trying to add a material icon in my code. Every time I do that, it gives me an error message saying ss of errorInvalid hook cell Navbaar.js import React from 'react' import " ...