I am looking to utilize a custom name for the mui-icon component in order to have more control over its function. Due to implementation requirements, I need to choose a different name from the default one assigned to the icon. // Default import import ...
I need help with logging and storing selected values from a Table component in React My Table component displays data from an API with checkboxes on each row. I'm using the <Table /> Material UI component for React. The documentation states that th ...
My goal is to personalize a MultiAutoCompleteTextView, which will be housed within a TextInputLayout for Material design purposes. This will enhance reusability and flexibility of the underlying code. However, I am encountering some issues even before sta ...
Hello there! I am currently working on creating a unique custom search input that will provide users with filter categories to select from when clicked. Users will also have the option to enter a title keyword to refine their search based on both the title ...
Currently in the process of upgrading from material-ui v0.19.1 to v1.0.0-beta.20. Initially, everything seems fine as Webpack dev server compiles successfully upon boot. However, upon making the first change, Node throws an Out of Memory error with the fol ...
I'm currently working on a web application with React and Material UI, which includes a registration form. After submitting the registration form successfully, I want to display a success message at the top of the page. To ensure consistency across m ...
I'm struggling to center 3 tabs on the screen. Right now, they are stuck on the left side. How can I make them scrollable and centered? Any suggestions? Check out the codesandbox for reference: https://codesandbox.io/s/material-demo-forked-dbcxl?file ...
Attempting to adjust the color attribute for ToggleButton in React. Desiring to achieve something like <ToggleButton color='primary' /> The current API for ToggleButton does not support this feature. A workaround I discovered involves ove ...
Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still not moving ...
Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...
After calling the fetch function in the useEffect, my getUsers function does not populate the data variable. I am unable to see rows of data in the MaterialTable as the data structure is in columns. I need help figuring out what I'm doing wrong. functio ...
How can I access complex objects in the GRID component of material UI? Specifically, I am trying to access the ami_info.account, but it only displays Undefined in the UI. var columns = [ { field: 'id', headerName: 'ID', width: 90, ...
index.js import React from 'react'; import {BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import home from './home'; import about from './about'; import menu from './menu'; impor ...
Looking for a way to create a single column layout with items of equal width using the Material-UI Grid system? Check out this sample code: <Grid container align="center" direction="column"> <Grid item className={classes.item}> < ...
After following the documentation, I updated my theme but the circular progress element still displays the default primary color instead of the one specified in the theme. My goal is to enable end users to adjust the theme using mobx computed values, but e ...
I'm currently using Material UI and have a Grid layout with three items. The left item needs to have a fixed width of 240px and be aligned to the left. The middle item should be left justified and can have any width, containing buttons that I've ...
Currently working on a nested form framework that utilizes the redux form and material UI framework. The components have been developed up to this point - https://codesandbox.io/s/bold-sunset-uc4t5 My goal is to incorporate an autocomplete field into the ...
I recently developed a web application with the foundation based on the Material-UI Example showcasing a responsive drawer. My current challenge involves getting a table to resize responsively according to the screen width. However, it seems that the Resp ...
I find myself in a predicament with my main React project using version "1.5.1" of "@material-ui/core", while attempting to build a new component that requires version "3.2.1" of "#@rjsf/material-ui" which internally relies on the latest version of "@mater ...
I am currently experimenting with the Material UI Drawer component. I expected it to close when pressing the Esc key or clicking outside of it, but unfortunately, it is not behaving as anticipated. I am utilizing the react testing library for my tests an ...
The MUI documentation suggests using a modern folder with components designed for modern browsers. Is there a way to configure webpack to automatically rewrite imports like import {Box} from "@mui/material" to use the modern version without manually changi ...
While using a styled component to return a material ui Fab component, an error appears in the console: React does not recognize the `showText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as low ...
I'm struggling with mapping my products in mui and placing each one in Grow. However, I keep getting this error message: "Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(Grow), expect a single ReactElement". Can anyo ...
On the React starter kit I'm using, I have react and react-dom 15.4.2 installed. I've been attempting to install material-ui but npm is informing me that the latest version requires a higher version of React (16.0). Is there a way for me to inst ...
After reviewing the documentation, it seems that material-ui offers support for a persistent drawer. However, I am looking to achieve a clipped persistent drawer similar to the image shown below. https://i.stack.imgur.com/wUNaL.png. This is my Sidebar co ...
<Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" variant="standard" /> )} /> Click h ...
Does anyone have a solution for disabling the backspace and delete keys in a column when using DataGrid with material-ui? ...
Utilizing the RadioButton component to showcase different options of a question within a custom-built component: import FormControl from "@material-ui/core/FormControl"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Grid from " ...
Is there a way to implement the MATERIAL-UI table on a class component? Most tutorials and official documentation show it as a functional component, leading to difficulties when dealing with react hooks in a class component. I am looking for guidance on h ...
After executing the code below, the browser displays the following errors: Uncaught TypeError: Super expression must either be null or a function, not undefined Uncaught TypeError: Cannot read property '__reactInternalInstance$uuzyb025gr28cqm0v65ka9k9' o ...
Currently, I have integrated the NumberFormat package from here, but my goal is to customize its style to match a TextField component from material-ui. This is how my component looks like: <NumberFormat label={strings.minDays} style={{marginRight:'20p ...
Currently, I am in the process of updating Material UI to version 5. Initially, I encountered an error stating that onEntering is deprecated and should be replaced with transitionprops. There is a specific method (let's name it doSomething) that I wa ...
One feature I am looking to implement is a tab navigation component that changes based on a specific search parameter called tab. For instance, if my URL reads as example.com?tab=test2, I want the navigation bar to highlight the item labeled test2. To ac ...
I'm currently working on implementing a feature that allows users to switch between dark and light themes in my web app. The challenge I am facing is how to ensure that this theme change functionality is available throughout the entire app, not just in the ...
I am experiencing an issue with displaying a MenuItem in my Dialog2 within my React app. Despite setting the zIndex: 1900 to a higher value than the two dialogs, the MenuItem remains hidden behind the dialogs instead of appearing at the front. Please revi ...
I am utilizing a Material UI Table, and within one of the columns I have a SelectField component that displays a dropdown with a few selectable items. Here is a snippet of the code: <TableBody displayRowCheckbox={this.state.showCheckboxes} ...
This code snippet represents the navigation bar for an admin user, featuring 3 icons: navigation menu, user menu, and manage button icons. The problem arises when clicking on any of these icons, as all dropdown items from each icon are displayed in their ...
When attempting to implement a Material button in my React app, I encountered the following error: Failed to compile. ./node_modules/@material-ui/core/styles/index.js Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/Lumiere ...
I am eager to incorporate Formik with MUI, but I am struggling to find a straightforward way to do so. The documentation is confusing and the examples provided are not very helpful. For instance, on this page, which is one of Formik's top-level examples, ...
I am currently working on implementing form validation for a React form that I have developed. The process involves using an onChange event to update the state with the value of each text field, followed by an onBlur validation function which checks the va ...
I am new to using react redux loading bar and redux forms After clicking a button, I want the loading bar to display. The issue arises when I try to load the loading bar, resulting in the following error message: proxyConsole.js:72 TypeError: Cannot read p ...
To incorporate Material UI icons into a React dashboard template of CoreUI, I added @mui/material and @mui/icons-material by running the following commands: npm install @mui/material @emotion/react @emotion/styled And npm install @mui/icons-material This ...
Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn't effe ...
I'm currently utilizing a combination of material UI table and react-table. When the number of rows in the table exceeds around 200, the performance dips. To address this issue, I am looking to display a fixed number of rows (let's say 20 rows) i ...
My current project is encountering a TS Error stating "(No index signature with a parameter of type 'string' was found on type 'ClassNameMap<"container" | "navBar" | "section0">'.)" The code below is used to assign styles to various divs: <ReactF ...
Image of the Issue Sorry for the zoomed-out image, I'm using MUI in React to dynamically display nested cards (The data has nested components rendering other components). Each grid contains cards that have grids within them and cards within those grids. ...
Material-UI version "@material-ui/core": "^3.7.0" I have a requirement to display Popper on hover over an element, but unfortunately, the Popper is not visible. This section serves as a container for the Popper component. import PropTypes from 'prop ...
Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...
Seeking a clever solution for the following scenario: I have a component that generates accordion elements in a loop based on an array of data. Each accordion has the following structure: <Accordion expanded={expanded === 'panel1'} onChange={ ...
I'm having trouble trying to center a fixed-sized table in the middle of the page using Paper component in Material-ui. I'm relatively new to Material-ui and not sure if I'm structuring it correctly. Can someone please help me with centering it on the page ...
One challenge I am facing is rendering the row numbers in a table so that they remain static even when columns are sorted or filtered. I attempted to use the getRowIndexRelativeToVisibleRows method of the grid API, but unfortunately, it does not work as ex ...
Need help with setting the background color of a Material-UI Drawer. I tried using the following code but it didn't work: const styles = { paper: { background: "blue" } } After defining the styles, I passed them to the Drawer component like this: ...
Currently, I am involved in a project and there is also a library project containing all the common components used throughout. Within this library, I had to integrate a component that relies on materialUI. However, upon trying to export this component, I ...
I'm trying to add a dimensions box to my form. I created 3 MUI textfields within a formGroup, set the border radius to 0, and adjusted the color properties but it still didn't work. This is what I'm aiming for My goal is to have 3 input fie ...
I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...
<Button href={node.slug}> <span>Read more</span> </Button> Essentially, the code above represents a button inside a Card component. If further clarification is needed, please don't hesitate to ask. The variable node.slug resemble ...
import MaterialTable from "material-table"; import ShipmentContext from "../context/ShipmentContext"; const ItemsTable: React.FC = () => { const shipmentcontext = useContext(ShipmentContext); const { filtered } = shipmentcontex ...
I am currently using the Autocomplete component with the following setup: <Autocomplete options={channels} autoHighlight multiple disableCloseOnSelect value={form.channel_ids} getOpti ...
I'm a Junior developer seeking assistance with my first question on this platform. Currently, I am working with a Controlled accordion in React and need the icon to change dynamically while staying open even after expanding another panel. The logic behin ...
My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...
I am attempting to create a new npm package that exports all @material-ui/core components with my own theme. I am currently using TypeScript and Rollup, but encountering difficulties. Here is the code I have: index.ts export { Button } from '@material-ui/ ...
I have been working on upgrading my NextJS project from Material UI v4 to v5 by following the official guide available at: https://mui.com/guides/migration-v4/ However, after meticulously following all the steps outlined in the guide, I encountered a frus ...
Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...
I'm currently working with the material UI Select component and I'm attempting to create a filter within it that will only display items matching the user's input. Below is a simplified example of my current project: function App() { con ...
I am working on a form and I want to link a react-router Link to a key press event. Here is the structure of the form: <div className="col-md-6 col-md-offset-3" onKeyPress={e => this._handleKeyPress(e)}> <Paper style={styles.form}> ...
Exploring react testing library for the first time. I encountered an issue while attempting to test my code that is wrapped with the Hidden Component from material UI. Surprisingly, despite the component being visible in the DOM, the test fails. Snippet o ...
I have a Mui Stepper that is functioning perfectly, but I want to customize it slightly. Instead of displaying an icon with a line between two steps, I would like to show the text under the icon and use a '<' symbol instead of a line. Here is the code sni ...
I am interested in incorporating star ratings into my cell designs using Material-Table, similar to the examples provided by Material-UI here: https://material-ui.com/components/rating/ Is it possible to achieve this effect in Material-Table? I have been ...
Struggling to implement Tabs and display data from a JSON file in Reactjs with an older version of material-ui. Despite following suggestions on StackOverflow to correct the nested map in JSX, the data is still not appearing under each tab. For reference ...
A challenge I encountered while working in React is as follows: <Grid item> { rolePriorities.map((rp, index) => ( <Chip key={index} label={rp} color="primary" sx={{ color: "whitesmoke" }} /> ...
When using a number input with min and max values set, I have found that if a user enters a number above the max value, I can retrieve the validation message from event.target.validationMessage during the onChange event. This functionality works well when ...
Looking for a solution: check out this codesandbox multiselect demo Currently trying to extract unique items from an array based on id in order to display them as options. Utilizing the MUI Select component. Successfully creating distinct arrays using di ...
I've successfully implemented a Material Switch based on my design by creating a custom component and styling it using the styled and sx prop. However, I'm interested in figuring out how to achieve the same result within the theme itself so that when I imp ...
I am facing the issue of not being able to find a solution to a known problem. The paragraph in question must not contain any other tags, yet I did not use any paragraph tags in my case. return ( <div className={classes.root}> <Stepper acti ...
When using MUI Select (Multiple Checkbox), I noticed that all other buttons on the page become unclickable until I close the dropdown. Even in their example page, I found that after opening the dropdown and selecting an item/s, I had to click outside the ...