I am working on a multi-step form that utilizes the Stepper component. The continue button transitions into a 'Submit Form' button when the user reaches the final step. However, I encountered an issue where the submit button with type='subm ...
Is there a way to display two secondary actions on either end of a list item without triggering additional onclick events? The placement can be adjusted by overriding the CSS properties right and left. https://i.stack.imgur.com/rhr7N.gif The issue arises ...
material-ui: v4.8.2 react: v16.12.0 When using babel-plugin-react-css-modules with an rtl app, I initially tried to utilize the injectFirst option but encountered a warning message stating: Material-UI: you cannot use the jss and injectFirst props at th ...
As a newcomer in the world of React.js, I am feeling a bit anxious about posting my question on Stack Overflow. I hope everyone can overlook my lack of experience and forgive me for any mistakes. I have been struggling to find the right solution to my prob ...
Currently, I am facing a requirement where I need to display both the name and email address in the options list. However, at the moment, I am only able to render one parameter. How can I modify my code to render all the options with both name and email? ...
https://i.stack.imgur.com/4piCG.jpg https://i.stack.imgur.com/CyQH3.jpg My code attempts to modify the styling of the map component, but it seems to be influenced by the Switch component. How can I ensure that the screen fits within the 'root' ...
I am facing an issue with the sorting functionality in the email field while creating a table using MUI DataGridPro. The sorting works fine for all other fields except for the email field. Adding some random text here to ensure my question is published. Pl ...
Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...
Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...
When developing my application, I encountered an issue with using Higher Order Components (HoCs) and withStyles for styling. If I apply multiple HoCs to one component, the classes prop of the first HoC gets passed to the next one in the compose chain, caus ...
I am currently utilizing the stack above to customize Material components using the props provided by the Material system in conjunction with styled-components. The component I am testing is as follows: import React from 'react' import Grid from '@materia ...
Having trouble dismissing the snackbar by clicking away or on the "X" button. It's supposed to disappear after 10 seconds but it just stays there! Not sure what I'm doing wrong. const Footer = () => { const [snackbarState, setSnackbarState] = ...
I need to add a link for redirection to some buttons. Here is an example of the button code: <Tooltip title="Open New Ticket"> <IconButton aria-label="filter list"> <AddTwoToneIcon /> </IconButton> </T ...
I'm struggling to figure out how to showcase the selected elements from my treeview. Any ideas or tips? The main purpose of this treeview is to filter data for export purposes. You can find the original code here. import React, {useEffect, useState} ...
I've integrated the @material-ui/pickers package with Formik in my React class component. However, when I attempt to adjust the date and time using the picker, I encounter the following error: TypeError: Cannot read property 'type' of undefined Here's a ...
My current challenge involves fetching data from a REST endpoint using axios, rendering it in my app.js component, and then sharing it with the entire app through the context API: axios.js import axios from 'axios'; const instance = axios.create({ b ...
I am utilizing the material UI datepicker and have enabled the option to display the Hijri calendar. However, I have encountered an issue where the months displayed in the month picker are in the Gregorian format (Arabic translation of January, February, e ...
How can I prevent changes from reflecting in a material-ui table when clicking on the X icon while editing a row? Is there a way to only save the edited record on the check (_) icon instead? Any suggestions or solutions would be greatly appreciated as I am ...
If we want to customize the theme in material-ui, we can do so by following these steps. import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { primary: { main: '#ff4400' }, secondary: { ...
My navigation bar has a routing issue that I'm trying to solve. Currently, the router only responds when the route is manually typed in the search bar. Clicking on the tabs does not redirect properly, except for the home button tab. import React from 'reac ...
Good day, I am encountering an issue with my data not accepting an undefined value. Below is the code snippet: interface IModalContatos { dados: IContatos; onSave(dados: IContatos): void; onClose(): void; } When passing this data to my modal, I rece ...
I encountered an error when trying to import the data-grid using lazy loading. const DataGrid = lazy(async () => await import('@material-ui/data-grid')) I have successfully imported other material-ui components without any issues, but for some reason ...
Currently, I am utilizing react-beautiful-dnd, MUI, and Next.js in my project. Although the example code appears to be very simple, it is not functioning as expected. Instead, it displays as shown in this image: https://i.stack.imgur.com/Y9kye.gif ...
I have created a custom Button Function Component in TypeScript using Material-UI as the base. After styling and adding features, I exported it as my own Button. Now, when I try to use this Button component in conjunction with the Link component from react ...
I’m currently working on creating a Dynamic Material UI Flex box that dynamically generates new rows based on the backend. The concept is to close the current outer Box and initiate a new one depending on a certain flag. Here’s the code snippet that I ...
I'm looking to adjust the spacing between the textfield and button components so they don't overlap. I want to create some space between them but I'm not sure how to achieve this. I'd like to have at least 1-2 spaces added between the textfield and the bu ...
I'm currently working on a React Material-UI autocomplete component and facing challenges with accessing a Javascript Object property within a handleSelect function. Although I can retrieve the townname value using document.getElementById, I know this is ...
Is there a way to make Material-UI's Autocomplete dropdown list appear only when the user starts typing? I've integrated the Material-UI Autocomplete component into my project, but I'm facing an issue where clicking on the TextField automati ...
I just can't seem to figure this out. Currently, I'm dealing with a controlled input using Material-UI's TextField and Autocomplete components. While I'm comfortable letting the component handle its own value, I do need a way to clear ...
When working with Material-UI's Select component, you have the 'autoWidth' prop which adjusts the popover width based on the menu items. Is there a similar feature available for the Autocomplete component? I'm looking to set the TextF ...
Currently, I am developing a desktop application using Electron, ReactJS, Redux, Material-UI, and Webpack. While most components work smoothly, there seems to be an issue with certain Material-UI elements like <IconMenu /> and <CircularProgress /& ...
Whenever I insert one of MUI's Text Field components into the column header of a Data Grid component, I encounter an issue where I cannot input a space into the text field. Additionally, pressing the right or left arrow keys while the text field is focused ...
I just finished creating a dropdown menu const [selectedValue, setSelectedValue] = useState(''); const handleSelectionChange = (e: any) => { //setSelectedValue(e) console.log('value', selectedValue) } .... <FormControl variant=&q ...
I'm currently working on styling a nested list within a React application using material-ui. The default padding for the "inset" property is set to 56px, which I find too large. I have been attempting to override this default value without success. Do ...
I'm having trouble retrieving input from a text-field in react and I can't figure out why. I've tried several solutions but none of them seem to be working. I even attempted to follow the instructions on https://reactjs.org/docs/refs-and-th ...
Can a Modal be designed to work like a Dialog with the scroll set to 'paper'? I have a large amount of text to show in the Modal, but it exceeds the browser window's size without any scrolling option. ...
Looking for assistance with my Expense Tracker application that interacts with a mongoDB backend. I'm utilizing the context API and material UI components for forms, but struggling to clear text fields after form submission. Being new to React and Jav ...
Hey there, I'm experimenting with changing colors by passing either 'primary' or 'secondary', but I'm not sure how to do it. // @flow import * as React from 'react'; import withStyles from '@material-ui/core/styles/withStyles'; import type { Theme } from ...
I'm currently working on a Material-UI project and I'm trying to incorporate some custom self-hosted fonts that are not available as Google Fonts. Despite following all the guidelines in both Material-UI and JSS documentation, I have implemented ...
Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...
I am currently working with a GridList in order to display Cards. The styling for these components is set up as shown below: card.js const useStyles = makeStyles({ card: { maxWidth: 240, margin: 10 }, media: { heigh ...
After diving into Material UI and flex, I've spent some time poring over the documentation but I'm still struggling to figure out how to align only the <CancelIcon /> in a <Drawer /> to the right. I know that to prevent the <Drawer /> fro ...
Can someone assist me with updating a record in the database through the front-end table display? Here is a screenshot for reference: https://i.stack.imgur.com/CPLN6.png I need the entire record to be updated in the backend once I click the save button on ...
Material UI Autocomplete component functions properly, but I am interested in extracting object.id as the value for the onSelect event (rather than object.name). Essentially, I want to display the object.name as the select item label, while retrieving obje ...
In my quest to create a multi-step form with React.js and material UI, I encountered an issue with Joi-Browser validation. The error message states: ValidationError: "value" must be an object. Since I am new to React.js, I would appreciate any guidance on ...
How can I retrieve the value of Material-UI auto-complete in react.js? I have tried productName: this.refs.productName.value productName: this.refs.productName.getValue() but neither of them seem to be working <AutoComplete hintText="Produ ...
source code import React from "react"; import { Button, ButtonProps } from "@material-ui/core"; interface MyButtonProps extends ButtonProps { "aria-label": string; "my-optional-property"?: boolean; } function MyCustomButton(props: MyButtonProps) { ...
Check out my current app bar design: app bar image Here is the inspiration for the app bar layout I'm aiming for (title above menu items): inspiration app bar goal This snippet showcases my code: import * as React from 'react'; // More code follows... I ...
Currently, I am utilizing MUI version 5 within a React project. My objective is to customize the icon color for the Error Alert by using General StylesOverrides. Although I successfully altered the color on the Alert component, I am unable to discover a ...
I have retrieved multiple JSON groups from an API, each containing one or more questions objects. My goal is to display each question along with its corresponding response in a MUI TextField or Select component, based on the value of QuestionType. Current ...
After integrating material UI into my existing application, I encountered a peculiar issue. When adding material UI components to modals, the entering animation fails to trigger. Interestingly, downgrading material UI or removing all MUI components resolve ...
import React from 'react' import { Stack, Typography } from '@mui/material' import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker' import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers' import dayjs, { Dayjs } from 'dayjs' ...
Currently in the process of updating my react site to version 16.8, I have encountered an issue with a material ui table. The functionality involves users selecting certain options, triggering a rest call when a button is clicked, and then displaying the r ...
I am currently working on developing an event-calendar application using React. The code I have written so far is responsible for adding date items to the calendar list. My goal is to enable users to add more dates when they click on the "add date" button, ...
Currently, I am enhancing an existing React app that utilizes @mui/material components. The SCSS modules are linked to my JavaScript components, and I import them along with the material components like this. // STYLE IMPORT import styles from "./logi ...
https://i.stack.imgur.com/nASqM.pngWhen attempting to utilize the Material UI grid system, I encountered an odd spacing issue when using grid direction='row'.https://i.stack.imgur.com/sl59V.png const useStyles = makeStyles((theme) => ({ ...
What is the process for importing AutoComplete in the most recent version (V1.0.0-beta.26) of Material-UI? ...
How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...
I'm currently facing an issue and it seems like there is a lack of documentation available for this specific problem. The situation is that I am building a website where I have implemented an AutoComplete component to search for data in the database. Init ...
When trying to create a styled TableCell component in a separate file, I encountered an error in TypeScript (ts(2322)). TypeScript was indicating that the properties "component," "scope," and "colSpan" could not be used because they do not exist in StyledC ...
There seems to be a lot of repetition in the code that needs to be cleaned up. I'm wondering if the switch statement is necessary. It looks like it requires the muiTheme palette to be passed this way. Also, can these theme constants be placed in a sep ...
In my table, there is a column labeled status. The backend returns three values for this column: "approve", "Review", and "pending". I am trying to change the icon shape based on the status value. Specifically, when the status is "approve", I want to use t ...
Hello everyone! I am currently facing an issue where multiple poppers open simultaneously when clicking on markers. I have been trying to display only one popper at a time, but haven't found any example of how to do this on the React Material site. Below i ...
I'm currently working on implementing Pagination in ReactJS and facing an issue where the pagination resets to page 1 when I navigate away from the current page and then come back. Ideally, I would like to resume from the same page where I left off. How ca ...
Running on React version 16.13.1, my component class includes a Material-UI Button component and a RefObject to access the button element. class Search extends React.Component<any, any>{ constructor(props: any) { super(props) this.streetV ...
Having trouble using fireClick.mouseOver(tab) to test tooltip functionality on tab hover. Here's a snippet of the code: it('should handle change on hover of tab', () => { const {getByTestId, getByRole} = renderComponent('Draft'); const tab0 ...
I'm a beginner in the world of styling components and creating visual designs that meet my preferences. My goal is to design two overlapping box components that will showcase user statistics and daily targets in a sleek and professional manner. The ...
Currently working on coding a table in ReactJS and MUI, my goal is to number the No. column from 1 to the length of the array. This snippet shows my code: <TableBody> {quizes.map((quiz, index) => ( <TableRow key={quiz._id}> ...
As a beginner with Material UI, I'm curious about when to use props within the .jsx script and when to utilize CSS in a separate stylesheet to style MUI elements. Is it necessary to still incorporate CSS stylesheets for MUI elements or is it preferabl ...
As a newcomer to react and typescript, I am exploring ways to expand the color palette within a global theme. Within my themeContainer.tsx file, import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'; declare module '@material-ui/core/st ...
I am currently utilizing MaterialTable from to manage data and perform CRUD operations within my application. I am seeking a way to automatically refresh the table data after any CRUD operation (add, update, delete). function fetchData(query: Query<Ro ...
Introduction I have embarked on a project to develop a Chrome Extension that utilizes a React component through the Content script. The React component I am working with is a toolbar equipped with various sub-tools for users to interact with while browsin ...
Is it possible to utilize MaterialUI without React? If so, can it be done via CDN or another method? <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b190e0a081f460f0a1d06046b191c150f7e7 ...
Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative ...
We are facing an issue with our NextJS app where it works fine in production, and locally it renders correctly. However, we are encountering some unsightly warnings that we are trying to suppress. client.js:1 Warning: Failed prop type: Invalid prop `compon ...