I inherited a project with material ui, which I have never used before. I have the following in my code <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > {label} </InputLabel> <Input className={className} id={id} value={value} onChange={(e) => { onChange(e.target.value) }} /> </FormControl>…
I have a Stack of Avatars, with text: <Stack> <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Today</span> <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#05C000' }} variant="square">V</Avatar>Yesterday</span> <span><Avatar sx={{ float:'left', width: 30,…
After Material 3, default TextField border and label color (when focused) were changed to grey. So I needed to set my ThemeData as below. If the TextField is empty, there's a hint inside it with light gray color, which is…
i have some struggles with material ui grid size. i want to set fixed grid size at specified breakpoint. For example at xs width is full but at sm width is 200px <Grid item container direction="row" xs={12}> <Grid xs={12} sm={can…
I am struggling for something that could be pretty straight forward and something that should have been the requirement of many, and I am still not finding any help on internet for that I am using material TreeView in my…
I am trying to control a MUI dialog with a signal, but even with the < p > the value from the signal is not rendered. However, the value of the signal is changed in the console. So if i…
In my app, the user needs to enter a quantity that can be in Bytes, KiB, GiB, or MiB. I'm using 2 Reacts MUI components : a TextField to enter the quantity a Select to select the right quantity unit…
I'm using MUI Autocomplete and Formik and I wanted to group this into categories. If it has no sub_accounts, then it shouldn't have a header label. Something like this: https://mui.com/material-ui/react-autocomplete/#grouped CODESANDBOX ------> CLICK HERE Expected outcome on the UI is…
i am build nextjs project and creating table from material ui and fetching data from mongoDB. i want to add two button on action (edit and delete) column but dont know how to do it on material MUI i want…
i am build nextjs project and creating table from material ui and fetching data from mongoDB. how to manipulate the data from the table. i want # columns auto increment start from 1,2,3,4,5 etc. every row. and this is my…