I have customized a <Tab/> element and I want to change its selected color using Sandbox demo code export const Tab = styled(MuiTab)({ "&.Mui-selected": { color: "red" } }); However, I've noticed that: 1. Apply ...
Currently, I have successfully implemented displaying data in a loop with boxes. However, I need to disable and enable functionality based on certain conditions, similar to a button within the box. On enabling, I should be able to implement a click functio ...
When passing a value to the DateTimePicker component from '@mui/x-date-pickers/DateTimePicker, the displayed value sometimes shows a discrepancy of +2 hours or +1 hour. This issue may be related to timezones. For example: The value being passed: 'Mon Sep ...
Is there a way to properly render a ListItem component with react-router Link as the root component? Here's the code snippet in question: <ListItem to="/profile" component={Link} > Profile ...
I am struggling to comprehend the inner workings of the code that involves the use of makeStyles(). It seems like every time I encounter this code, I end up mindlessly copying and pasting without truly understanding what is happening behind the scenes. To ...
The disabled unchecked checkbox appears too subtle to me, and I would like to enhance it by giving it a grey background and changing the cursor style to not-allowed. I've been trying to implement these styles on the checkbox using the makeStyles, but ...
Material UI is being used and a home icon has been imported into the navbar as shown below <Home edge="start" color="inherit" aria-label="home" onClick={event => window.location.href='/ <Home fontSize="large&qu ...
Seeking input on the best solution for customizing MUI themes in my React projects. Currently, I manually copy theme files from previous projects to maintain consistency in styling between MUI and my UI design. Looking to create a custom library based on M ...
I've encountered a problem with the grid system not working as expected in my setup. In one file, I have configured it to display blog items like this: return ( <div> {blogs != null ? (<Grid container direction="row&qu ...
Currently, I am trying to create an auditorium viewer and seat selector screen using Material-UI. However, I have not been able to find a similar control for this specific task. Do you have any suggestions on how I could go about implementing this screen? ...
react-dom.development.js:86 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. at p at http://localhost:5173/node_modules/.vite/deps/chunk-WQ5FBX7J.js?v=539aff10:2964:50 at Typography2 (http://localhost:5173/node_module ...
Recently, I delved into experimenting with react. Currently, my focus is on creating a navBar using material-ui and react. Whenever I hover over the menu, the drop-down appears. However, to close the drop-down, I am required to click outside of it. My goal ...
I am trying to implement pagination based on the length of an array, which is currently 2. Therefore, I need a total of 2 pages to display each array item per page. Can someone help me achieve this? View my solution on CodeSandbox Desired output: Page 1 ...
Recently, I created a new React app with Create React App. However, when I tried to install Material UI, I encountered an error message that is causing some confusion: Link to image of console All my other packages are installing without any issues. Coul ...
I'm struggling to keep the 'Popover' component from Material UI fixed on the screen when it's open. The issue is that when I click to open the popover (https://mui.com/material-ui/react-popover/), it doesn't block the scroll and th ...
Implementing a modal form with an ajax request using react, redux, and react-redux has been my current project. In my understanding, react-redux allows you to : display data from the redux store in your component dispatch an event from the container to ...
I'm currently working on developing a form that allows users to choose multiple members from a drop-down menu. To accomplish this, I decided to utilize Autocomplete from material-ui. Below is the code snippet I have implemented so far: import React, {useS ...
In my code, I am looking to store only an option's ID in a value For autocomplete functionality, the value's type and the option's type need to be the same My solution was to change the value in onChange, which worked successfully However ...
I'm facing an issue with the default value in my autocomplete feature within my React app. Even though I set a default value, when I try to submit the form, it still shows as invalid because it appears to have no value until I manually click on the autocom ...
After integrating material-ui (v0.14.4) into the mern starter boilerplate and passing the useragent through muiTheme (as demonstrated here), I noticed a significant delay in rendering all material-ui components. While no errors are being displayed in the c ...
Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...
I am currently utilizing the MUI Select component in order to create a dropdown list. My goal is to: use the mouse to select an item utilize the up/down key for navigation and selection However, I specifically aim to disable selecting an item by typing i ...
How can I dynamically change the icon attribute in my RMWC Button element when an onClick event occurs? <Button outlined icon={<CircularProgress />} onClick={(e)=> { // e.currentTarget.icon = ''; // console.log(e.currentTarg ...
As a React beginner, I am working on a dynamic list of employee items within a Card component for a dashboard. My goal is to create a link for each employee that, when clicked, opens a modal dialog for editing on the same page. I'm struggling with ho ...
I have a collection of menu buttons with icons, stored in an array of objects. The icon names are saved as strings that correspond to Material UI icons: interface MenuButton { text: string, onClickFunction: Function icon: string } export defau ...
I am currently working with the react material-ui tables component and I am looking for a way to improve pagination by adding options to load both the first and last pages, or setting a list of all available pages in the table pagination. Any suggestions ...
Greetings! I am diving into the world of React and exploring styling for the first time. As a newcomer, I am attempting to style the material-ui Button component with styled components. My approach involves overriding global class names, such as MuiButton ...
In my attempt to access input data through React's "ref" attribute on a TextField in Material-UI, I've encountered some difficulties. It doesn't seem straightforward to achieve this using the 'inputRef' or 'inputProps' methods. The code snippet below demo ...
Trying to implement a collapsing list animation using React/Joy-UI. Below is the Transition element code snippet: <Transition nodeRef={nodeRef} in={browseOpen} timeout={1000}> {(state: string) => (<List aria-labelledby="nav-list-bro ...
I've been utilizing this code to develop my scheduler application. Here is the code snippet from my current project - Scheduler.js class CalendarScheduler extends Component { state = { viewModel: schedulerData, showBookingDialog: true, } handleC ...
Currently experimenting with integrating the Material UI 1.0 (beta) @withStyles annotation into a React component. The documentation provides a JavaScript example (), however, it results in a compilation error when using Typescript. Despite the error, the ...
My journey with Typescript is relatively new, and I've recently built a snackbar component using React Context. However, when attempting to set the Alert severity, I encountered this error: "Type 'string' is not assignable to type 'Colo ...
I am struggling to update the state and component in my code. When I press a button and change the value of one of the props in the popup component, the prop value does not get updated. I suspect this issue is due to using setState. I researched a possible ...
While creating a simple react weather app, I encountered an issue. The app was functioning perfectly until I added a material-ui button. Now, the app only works when I press enter and not when I click on the button. It seems that the material-ui code const ...
I am currently working on a component that allows users to select roles: https://i.stack.imgur.com/bnb9Y.png export const MultipleSelectChip = ({ options, label, error, onRolesUpdate, }: Props) => { const theme = useTheme(); const [selected ...
I've been trying to customize the hover effect for the options in the mui Auto Complete component drop-down menu, but I'm having trouble finding the right method to do so. Here is the hover effect that I want to change: Image I'd like to u ...
Trying to update typography in the theme using Material UI but facing issues with object changes not working. The palette, however, is functioning correctly. Attempts were made to modify H3 styles and default font size but without success. On the contrar ...
How can I customize the font weight for MUI Table Cell using React 18 and the latest styled-components? Although this code is changing the color correctly, it's not adjusting the font weight. const StyledTableCell = styled(TableCell)({ backgroundCo ...
My React code incorporates Material-UI components and a theme. As per the documentation, the "light" value is supposed to be calculated from palette.primary.main. I have specified a hex color for main and secondary colors, which are working correctly. Howe ...
Currently, I am utilizing Material UI for react and I am looking to shift the position of the label within text fields to the right. However, due to its motion, it does not appear as visually appealing. Is there a way to modify this while maintaining the ...
Currently, I am utilizing the premium version of material-ui's DataGrid known as x-Grid. This feature enables users to toggle between hiding and showing columns either through the column options menu or the Columns Panel on the toolbar. My objective: ...
Struggling with Rendering Issues in my React App I am facing challenges while building my react-app, specifically when using material-ui/core version 4.10.2. While everything works perfectly on the normal react-scripts dev server, I encounter rendering pr ...
I currently have a default list of options for the user. However, I want to allow users to add their own category dynamically. This will trigger a dialog box to appear. How can I modify my code so that the value property starts from number 4? Take a look ...
Currently tackling a challenge with textfields and floating labels using the MaterialComponent pod. The Textfield class is issuing a warning stating that 'MDCTextField' is deprecated along with its associated classes. Any suggestions on how to address this ...
I came across a project where someone implemented components with custom CSS. One interesting thing I noticed was a wrapper component, similar to Material UI's Container or just a simple div with applied styles. export const Container = styled.div` ...
An unusual problem has arisen, but I have a concise example that demonstrates the issue: https://codesandbox.io/s/falling-architecture-hvrsd?file=/src/index.js https://i.stack.imgur.com/CkL4g.png https://i.stack.imgur.com/nDjuD.png By utilizing the divs ...
In the development of my single page application using ReactJS and MaterialUI, I have encountered a problem where some components do not align with the documentation provided by MaterialUI. Upon investigation, it appears that these component styles are bei ...
Currently, I am in the process of developing an application using MUI which involves a MUI datagrid containing user details like phone numbers and email addresses. One issue that I am encountering is the ability to implement actions that would open the ema ...
Encountering difficulties while attempting to construct my storybook using rollup.js. Within my react components, I am utilizing @mui/material, and the installation page suggests installing two additional packages called @emotion/react and @emotion/styled. ...
In the code snippet below, you can see my Select component. I've implemented a data fetching process and within the useEffect, I am setting the categoryId. However, an issue arises where the placeholder is displayed in the background as shown in this ...
As I work with a Material UI Slider in my React app, I am aiming to trigger the event onDragStop instead of onChange</code to reduce the number of times the event is fired. However, according to the <a href="https://mui.com/material-ui/react-slider" ...
Currently, I am using a simple TextField component from Material UI in my React project (noting the use of "required"). <TextField label="Last name" name="lastName" required value={this.state.lastName} onChange={this.handleChange} / ...
Looking for some assistance with a coding issue I'm having. Here's the code snippet: import { AppBar } from "@mui/material"; import { makeStyles } from "@mui/styles"; const useStyles = makeStyles({ root: { backgroundColor: ...
I am looking to change the color of the asterisk in my form fields from black to red. I am currently using the Material UI React library and need some guidance on how to achieve this. You can view the code here: https://codesandbox.io/s/r7lq1jnjl4 For mo ...
I need to figure out how to activate a button in a modal when text is entered into an input field. The form is part of a different class and is utilized within a parent class. How can I pass an onChange method to my form component? Check out the code for ...
Having trouble with the simulate.click function when testing a react component using material-ui and 'react-addons-test-utils'. Specifically, I can't seem to get it to work for the IconMenu and unsure where the issue lies. The goal is to sim ...
Recently, I encountered an issue with my code that changes the background color of my grid. It was working fine before, displaying a black background, but now it suddenly turns white and I can't seem to alter the root element's background color. Is there ...
Hey there, I've been trying to change the primary text-colors in Material UI, I managed to customize the primary color with this code: const blue = { 50: '#3ea5d7', 100: '#3ea5d7', 200: '#3ea5d7', 300: '#3e ...
Is there a more efficient way to adjust the size of the action icon based on table density in response to user interaction? Currently, I am using onStageChange to track all changes in the table and update a state variable on the component. ... ...
import { styled } from "@mui/system"; import DeleteIcon from "@mui/icons-material/Delete"; import SendIcon from "@mui/icons-material/Send"; import { Button } from "@mui/material"; const CustomButt ...
I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...
Recently, I encountered an issue while trying to implement a stylized input field from @material-ui. The code snippet I used was: <TextField id="outlined-basic" className={classes.inputField} color="primary" label="Messa ...
I have been working on making my navigation responsive by utilizing breakpoints. After thoroughly reading the documentation, I attempted to implement the code like this: ` import * as React from 'react'; import { styled } from '@mui/material/styles'; impo ...
As I was troubleshooting some issues, I encountered a roadblock with sending DatePicker data to my form. While most of the elements in my form are from redux-form-material-ui, DatePicker is not included in it. I came across two methods of incorporating th ...
When the validation fails, my goal is for the error message and TextField to be styled like this: View Desired Result Image. Currently, with MUI, I've made progress towards the desired look. Here's where I'm at: View My Progress Image, but I'm unsure how ...
I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...
I'm having issues with implementing a table in my React app using MaterialUI Table and Table Pagination component. The page change handling is not updating the list properly when changing pages. Any suggestions on what I could try to resolve this prob ...
Utilizing the OutlinedInput component from Material UI to enable users to input a number. When the input's type is set to number, the browser automatically includes two small arrows in the input field, which is working as expected. However, these arrows c ...
Default behavior displays data in ascending order. Clicking on the table header should toggle between descending and ascending orders. Load Data in ascending order -> On click, change to descending order -> Again on click, change to ascending -> loop cont ...
Currently, I am working on a ReactJS project where I have integrated two components - PrescriptionIndex and PrescriptionNew. Let's start with the 'PrescriptionNew' component: import React, { Component } from 'react'; import FloatingActionButton from 'm ...
I tried implementing a dropdown list with Material-UI, including an icon on the left side. However, after following the documentation and adding the code for the icon, the dropdown list stopped working. InputProps={{ startAdornment: ( ...
I've been working on creating an accordion using the "@mui/material" library, but I'm encountering difficulties in fixing the height of AccordionSummary. I have tried various solutions listed below, but none of them seem to work for me: Setting the sx pr ...
I need the expansion arrow in my app to be on the left side of the panel. However, it currently appears on the right side by default. This is what I have tried: <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMore ...
I am currently utilizing the Mui Grid component and aiming to display the content of a column based on certain data conditions. Could someone guide me on how to incorporate a conditional statement in the renderCell method? const columns: GridColDef[] = [ ...
I've been on the hunt for a solution to customize a badge component similar to what's seen here: https://mui.com/material-ui/react-badge/. As of now, only options for making it a dot or adding a number in a circle are available. However, I'm looking to pe ...