Trying to populate a Material UI table with data from an array that I have. The structure of my array is sourced from a file that I imported using React Papa Parse 3. https://i.stack.imgur.com/Xw1wd.png I am working on integrating the data into the follo ...
Trying to apply a theme like this: declare module "@mui/styles/defaultTheme" { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface DefaultTheme extends Theme {} } ReactDOM.render( <StyledEngineProvider injectFirs ...
Is it possible to target pseudo selectors like ::before, ::after in Material UI? For instance, is it feasible to use them in a component like this? const customStyles = makeStyles((theme) => ({ root: { textAlign: 'center', '&::before': ...
I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...
I am having an issue with rendering a list of posts on the index page. I can successfully create posts by clicking the 'Add Post' button and submitting the form on the /posts/new route. However, the list of posts is not showing up on the index pa ...
There seems to be an issue with infinite looping in this code, and I can't figure out the cause, import React, { useEffect, useState } from 'react'; import VideoCardComponent from './VideoCard'; import Grid from '@mui/material/Grid'; import { connect } fro ...
Completely new to React and Material-UI. I'm attempting to modify the color of table rows when hovering over them with the mouse. I have tried various solutions from different posts but none have worked for me. (e.g. Root, cell, and tableRow) The x ...
Having an issue with the table component in react material-UI. I am trying to create a dynamic table where the content is displayed based on the data it receives. I have been looping through the data and creating a TableBody element for each iteration. Ho ...
Greetings everyone! Today, I wanted to address an issue that has been causing some trouble for me recently. I've been utilizing the autoCompletion feature from materiall-ui along with formik in reactjs. However, I've been facing difficulties when it come ...
I'm attempting to show a remove icon on a grid display when the user hovers over it with their mouse. this.state = { action: [], } <div> {this.state.action.map((value, index) => { return ( <div key={index} onMouseEnter={th ...
I am currently working on a project using Nexjs with @mui/material. There is an ongoing issue regarding memory usage in Nextjs, which can be found on this GitHub link. Whenever I run the development server for a period of time, my laptop's RAM gets compl ...
I recently started using React Material-ui for the first time. Whenever I run yarn start in my react app, it takes quite a while (approximately 25 seconds) on my setup with an i5 8400 + 16 GB RAM. Initially, I suspected that the delay might be caused by e ...
I recently developed a website using Material UI, where all buttons are styled as "outlined" except for the Calendar in KeyboardDatePicker. The "ok" and "cancel" buttons in this dialog have the default appearance. After reviewing the API documentation (), ...
Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sent. Ho ...
I recently created an Amazon-clone UI using create-react-app, but it only displays dummy data. The issue arises after deploying it to Vercel - the routing does not function as expected. When clicking on links, a blank page appears with correct URL paramete ...
I want to change the color of a disabled element within the TextField component when it is hovered over. To see an example, check out this demo import * as React from "react"; import TextField from "@mui/material/TextField"; import { ...
Is there a way to obtain a global reference to the xgrid component in order to interact with it from other parts of the page? The current code snippet only returns a reference tied to the html div tag it is used in, and does not allow access to the compo ...
My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...
I've been using mui lists to set up a sidebar. <List> <StyledLink to="/"> <ListItem disablePadding> <ListItemButton> <ListItemIcon> <GridView ...
UPDATE: Problem solved! I managed to find a solution and have updated my sandbox with the fix! REVISION: After some investigation, I have identified that the issue lies within this specific line of code in the autocomplete... isOptionEqualToValue={(option ...
An issue with the display of my code image has arisen. Interestingly, the Axios calls work effectively when I console them. import { Container, Grid, Paper } from '@mui/material'; import { useEffect, useState } from 'react'; import { styled } from '@mui/ma ...
Currently, I am in the midst of a React project and using Material-UI to style my components. My goal is to modify the theme by adjusting the font size of certain labels such as Text Field labels, Menu dropdown labels, and Autocomplete labels. Despite my ...
Exploring the capabilities of material-ui framework wrapped for clojurescript using reagent-material-ui, I am developing a small desktop application. One thing that piqued my curiosity is how to pass props and style when utilizing the reagent/as-element ...
Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ pa ...
I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...
I've made the decision to transition from using makeStyles to utilizing styled in Material-UI v5 for styling, as it's considered the "preferred" method. While makeStyles is still functional, I want to embrace the newer styling solution. In my navigation l ...
Recently, I have been experimenting with implementing react-hooks useState in material-ui/tabs component. While I have been successful in using the handleChange function, I am eager to explore and master the use of hooks in this scenario. Interestingly, my ...
What specific type should I use when passing Material UI Icons as props to a component? import {OverridableComponent} from "@mui/material/OverridableComponent"; import {SvgIconTypeMap} from "@mui/material"; interface IconButtonProps { ...
I am trying to implement a custom InputFormat in the following manner 2018-01-05 13:08:00 This is an example code snippet <LocalizationProvider dateAdapter={AdapterDayjs}> <DateTimePicker renderInput={(props) => <TextField {... ...
I have implemented a Card Grid using Material UI's Grid and Card components. Below is the code I used : class CardList extends React.Component { render() { const cardComponent = CardSeed.cards.map((card) => ( <Card className=&q ...
Is it possible to display a custom component within an autocomplete material-ui component? Similar to the example shown here: https://i.stack.imgur.com/rhx4c.png ...
I'm attempting to dynamically generate classes for the material ui Menu using the following approach : const useStyles = (props) => { return makeStyles({ paper: props.style, }); }; const StyledMenu = (props) => { const classes = useStyles( ...
Recently, I implemented a feature where chips are generated as the user types in a text field and clicks on create. A chip is then displayed with the entered text. Now, I am looking to add the ability to delete these chips dynamically. You can view the s ...
The AppBar component applies certain styles to children of specific types, but only works on direct children. <AppBar title="first" iconElementRight={ <FlatButton label="first" /> }/> <AppBar title="second" iconElementRight={ <di ...
I am in search of an alternative to material-ui-search-bar because it is no longer being maintained. I have been suggested to try using Material UI's auto complete instead. However, from the examples I've seen, it seems like only text field structures are ...
Currently facing an issue with using the Material UI custom theme, resulting in errors with style components. Despite having already installed npm packages like "@mui/material", "@emotion/react" and "@emotion/styled", the error persists. My project utilize ...
After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI a ...
I have a component that consists of a form: import React from 'react' import Relay from 'react-relay' import { browserHistory } from 'react-router' import MenuItem from 'material-ui/MenuItem' import TextField from ...
I am searching for a way to clear the fields of a form without using reset() so that they still appear as changed. There are three options I am considering: using null, undefined, or ''. null Using null can cause issues with non-nullable fields, even if ...
Currently utilizing the material-table to display data. My goal is to select one row at a time and pass that row's data to another component. Multi-row selection is not desired, so using radio buttons instead of checkboxes is the suggested solution. Is t ...
I'm having trouble customizing the box shadow for the Material UI card. I attempted to remove the default boxShadow and apply my own style to the cardWrapper I created, but it doesn't seem to be working. How can I add a custom boxShadow without u ...
Is there a way to restrict the input year range when using @mui/x-date-pickers? I want to limit it from 1000 to 2023 instead of being able to enter years like 0000 or 9999. https://i.stack.imgur.com/0p6j3.jpg I have tried adding a mask to InputProps in my ...
Currently, I am working on a Fab component that changes color when clicked. However, I am facing an issue where the text color can only be modified within the sx property. I am unsure why this conditional cannot be applied inside the sx prop. If I cannot ...
Hey there, I've been using React Material UI Tab and ran into an issue where the tab selection is lost on page refresh. Does anyone know how to fix this problem? This pertains to a code snippet for the material ui tab component. class SimpleTabs exte ...
Attempting to execute the blog example provided on Material UI's getting started page. However, encountering an issue with the source code: Inside blog.js import post1 from './blog-post.1.md'; . . . return( <Main>{post1}<Main/>); and in Main ...
I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specificColu ...
Software Version: "@mui/x-data-grid": "^6.2.1" I have a script that generates columns for the DataGrid as shown below (only including relevant code) if (prop === "date" || prop === "dateModified" || prop === "n ...
I've been working with the Material-UI Dropdown Menu component and I'm trying to figure out how to console log the primaryText of the selected <MenuItem/>. Can anyone provide guidance on how to achieve this? ...
Can names be randomized or Mui-classNames removed? https://i.stack.imgur.com/J6A9V.png Similar to the image displayed? (All CSS class names would be jssXXX) Appreciate your assistance. ...
Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...
I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...
I've searched high and low, combed through documentation, scoured YouTube for tutorials, and Googled endlessly with no luck. It feels like this might be beyond the capabilities of MUI, but it's becoming quite frustrating. All I want is a clean and correct ...
I encountered an issue when styling a component imported from the Material-UI library using the styled API (@emotion/styled). Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite. Despite attempting to downgrade to typescript ...
How can I filter the options in a Material UI Autocomplete component based on a property of the option value that is not displayed as the label? I want the user to be able to input an item id, like 5141, and have the options filtered to show 'brass pipes'. ...
My website's navigation bar is created using material-ui components, specifically the ListItem component. To style each item when selected, I added the following CSS code: <List> {routes.map(route => ( <Link to={route.path} key={route.n ...
I'm attempting to implement the onExited method (Material-UI v1.0.0-beta.41) in my React.js code like this: fireOnExit=()=>{ alert("Exited"); } <button label="Cancel" onClick={this.handleClose} onExited{()=>this.fireOnExit()}/> Unfortuna ...
I have recently made a change in my code where I replaced conditional rendering of child components with wrapping them in <Fade />. However, the Fade effect does not seem to work as both components always display. Below is the updated code snippet: / ...
I encountered the error and managed to replicate it in a mock environment. Here are the specific errors I am encountering: Locally: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. Check the render meth ...
During the process of upgrading material-ui in my React Application from version 3.9.3 to version 4.3.2, I encountered an error message stating TypeError: styles_1.createGenerateClassName is not a function. I am feeling lost when it comes to transitioning ...
How can I create two slide toggles with a unique color scheme on the same page? Looking to add some flair to your website with custom-colored slide toggles? Learn how to effortlessly incorporate two of them onto a single webpage here. ...
I'm currently working on a web application using React along with Material UI. My objective is to create a layout that consists of two Boxes nested within a third Box. The bottom Box should adjust its height based on its content, while the top Box needs to ...
Is it possible to have two separate functions within one condition? My objective is to create 3 buttons that call one function to change the value of this.state.status based on the preferred condition. 'all' = null (this is my desired outcome, w ...
Is there a way to remove the underline and slash characters that separate day, month, and year in the material ui pickers for version mui version 4? <KeyboardDatePicker margin="normal" id="date-picker-dialog" label="Dat ...
I'm facing a unique challenge where I need to include several badges on one piece of content. It doesn't appear to be covered in the documentation as a supported feature. Has anyone encountered this before and found a solution? How should I go about tack ...
Currently, I am utilizing the Scrollable tabs feature from Material-UI. How can I go about changing the icon of the scroll arrows in SVG format? I came across the TabScrollButton component that is available for use. Would I need to create separate ones fo ...
I recently developed a form using a combination of technologies including react, react-query, material ui, formik, and yup for schema validation. Check out the code here Custom fields I created: SelectField AutocompleteField CacheAutocompleteFie ...
Here is the code snippet I have: <div className="center"> <TextField variant="outlined" className="manualUserFollowTxt" required id="manualUserFollowTxt" label="Username" name="username" autoComplete="username" a ...
When would you choose to use one over the other? What are the key differences in how they operate? ...
As I dynamically generate Material UI form components, I encounter an issue with updating their values. The value prop is assigned to a useState values object, and when I update this object and the state, the value in the object changes correctly but the M ...
I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...
I recently switched to using @reach/router for a new project after receiving a recommendation on the react-router-dom GitHub page. Despite what should be a simple use case, I am encountering some issues. Initially, I attempted to integrate the @mui BottomN ...
I am relatively new to full stack development and I am currently working on a project to enhance my understanding of frontend development with React JS. While working on this project, I have been using Redux without any issues so far. However, I am facing ...
Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the ou ...
I am a newcomer to React and MUI, and I am experiencing a UX issue where when a popover (dropdown menu or autoselect dropdown) appears, the main body of the site can still be scrolled. I know that this issue has been fixed in the new beta V1 for MUI, but s ...
Is it possible to control the torch light of a mobile device by toggling a button? https://i.stack.imgur.com/x9nIf.png <IconButton onClick={() => setFlashOn(!flashOn)} style={{ position: "absolute", right: 80, top: 20, zIndex: ...