Questions tagged [material-ui]
React components that implement Google's Material Design. Please note that this tag should be used for questions regarding the MUI (formerly Material-UI) library. Otherwise, see the tag's info for other tags to use.
20,533
questions
0
votes
1
answer
17
views
How can I keep Link and IconButton on the same line?
I have a link with a long text and a "copy" icon after it. I don't the icon to be aware rendered on a separate line alone.
So these should be ok:
But not this:
The basic code is:
<>
...
0
votes
1
answer
16
views
Material UI changes style of components
Every time I render component, it's keep changing styles.
import React from 'react';
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
...
0
votes
0
answers
7
views
Material UI TextField select not showing initial value on form edit
I have an edit form in a modal that lets you edit user info. Here is the relevant portion:
export const EditUserModal = (Props) => {
const [formValues, setFormValues] = useState(Props.userData);...
0
votes
0
answers
9
views
Why are my submitError's rendering on the second submit instead of the initial submit
I wanted to create a reusable component that could render server side errors if there are validation errors in the form. On the initial submit even if there are errors coming from the server, they ...
0
votes
0
answers
17
views
No overload matches this call - React + MUI + tsx
Use Case: I am looking to build a <Box/> component that has a datacy attribute, with Material UI, React and tsx.
Error: tsx is throwing the error No overload matches this call.
<Box datacy=&...
0
votes
0
answers
11
views
How to set MUI Slide works correctly with absolute positioned children?
Slide in Material UI transition calculates the dimensions of the component we want to animate, but if the component has children with absolute positioning, their coordinates will not be included in ...
0
votes
2
answers
12
views
Editing css properties of MUI Icons
Can somebody help me how to change the css property of mui icons so that i can assign a perticular color when the icon is on focus...I have used the icons in header and am rendering specific pages ...
0
votes
1
answer
19
views
React: Using the same form for create and update record
I am new in ReactJS and build a Create form for record. On the other hand, now I need to create an Update form and I am wondering an elegant solution and apply it for the next projects as well.
I ...
0
votes
0
answers
11
views
When I upload a rar or zip file using useForm, the type is empty
I use useform in form operations. If I upload an image, the types of files in the filelist are not empty, but when I upload zip or rar, the type is empty.I couldn't figure out if this error is caused ...
1
vote
0
answers
11
views
MUI DataGrid onCellEditStop changes previous value
MUI DataGrid
onCellEditStop changes value of previously edited cell when changing other cell.
I saw a post that said that using onCellEditCommit is a solution, but it's deprecated so.. I need another ...
0
votes
1
answer
16
views
Vertical Fixed Box at bottom of screen using MUI
So far I have tried this:
import "./styles.css";
import { Box, Typography } from "@mui/material";
import styled from "@emotion/styled";
export default function App() {
...
0
votes
0
answers
17
views
MUI v5 TextareaAutosize error: Too many re-renders. The layout is unstable
I have lots of MUI v5 TextareaAutosize components on a page ang getting error because of that:
MUI: Too many re-renders. The layout is unstable.TextareaAutosize
limits the number of renders to ...
1
vote
0
answers
20
views
Checkbox in Formic Default Checkbox
When I passed the initial state the value of the checkbox must be checked according to my knowledge but I don't know why values are showing empty. I think I am doing wrong?
Empty Checkboxes Despite ...
0
votes
0
answers
9
views
MUI Datetime picker, picker's default value to have 00:00 as time
I followed MUI's (v4) tutorial for DateTime picker commponents (https://v4.mui.com/components/pickers/).
I have the scenario where the textfield is null, and when I click on the button, the Picker has ...
0
votes
0
answers
13
views
DesktopDatePicker MUI React: I am trying to write manually the day but did not work
I am trying to write manually the date in textbox but when trying to write year, it shifts the digit to the end and fills with zeros in front of it. Also, if I press backspace it shifts right and ...
1
vote
2
answers
23
views
How to trigger yup validation in react-hook-form before the user is clicking the submit button?
I'm using react-hook-form with yup validation and MUI components in my react TypeScript app. The errors from the yup validation is showed only after the user is trying to submit the form (clicking on ...
0
votes
0
answers
13
views
Display a content with some Data in last stepContent material ui 4
I'm trying to build a vertical stepper using material ui 4 that works by keeping the data from the previous step, like this example:
but the vertical stepper in the documentation of material ui, only ...
1
vote
1
answer
51
views
Color in autocomplete
I have autocomplete element,
the color property warning only works on focus,
any workarounds?
https://codesandbox.io/s/angry-jennings-jdqt1b?file=/demo.tsx
I wish the warning color will be all the ...
0
votes
1
answer
12
views
How to display the name of Item in Material-UI Data Grid
Am using DataGrid from material UI react to display my data.
my database is like this:
this is my column code
const columns = [
{ field: 'user_id', headerName: 'User',flex: 1},
{ field: '...
0
votes
0
answers
18
views
react material ui table with two rows
positioning a table with two rows
Hey, I am new to material ui I am trying to understand some things
I want to create a table in that table I want to have header with two rows but I am having problems ...
0
votes
0
answers
12
views
React MUI MS Word like add row functionality to Table
How could I implement an add row functionality for MUI's Table, sg like in MS Word, when you hover over a row and on the side a little plus icon appears and you can insert a row in that position?
I ...
1
vote
0
answers
26
views
How can I remove the unused space at the end of a flexbox with wrapped items?
Im facing a problem with a flexbox and wrapping the items. I'm working with react and mui, but for convenience I've written the example code in plain html and css. But if you know a solution in mui/...
0
votes
0
answers
17
views
Why is my CSS not applied on child in React App (Next.js) using MUI styled
In my flex component I want to apply a marginRight between the child elements. The CSS is effective in development during hot reloading, but does not get applied when rendered with SSR although the ...
0
votes
1
answer
30
views
Why is my ref.current being null inside useEffect? [duplicate]
I am using MUI Dialog to render the modal and inside the DialogContent, I have a div that accepts the ref. When I try to access the ref inside my useEffect, it's null. Here is the code demonstration,
...
1
vote
0
answers
18
views
CSS Transition doesn't work on chrome for android
I am coding a react application that displays an animation for a moving color within a div when a user clicks. I do this using a div inside that changes its inset-inline-start and that has a ...
0
votes
1
answer
20
views
Make each value of MUI autocomplete sit on a new line
I have a multi-select MUI Autocomplete component, and would like the selected options to sit on its own individual line to improve readability, but not sure how to go about it. It currently looks like ...
0
votes
0
answers
10
views
How do I set space between control and label of `FormControlLabel` inside a grid?
I am trying to make space between control switch and it's label. what property of FormControlLabel would set it correct?
my code snippet:
switchContainer: {
display: 'flex',
flexDirection: '...
1
vote
0
answers
18
views
How can one override theme.palette.action object in MUI theme?
The MUI documentation says it only exposes some selected palette colors to override and colors like action and text etc. are not part of it.
Is there any way one can override it at the theme level?
I ...
0
votes
0
answers
21
views
Unable to show Sidebar when add 2nd Route with index element
I am developing a dropdown Sidebar with ReactJS, and using separate files with the name of sizeConfig and colorConfigs and access it in mainLayout page using material UI.
sizeConfigs.js:
const ...
0
votes
2
answers
10
views
MUI-X autocomplete with TextField turns off cell edition
so basically when I click twice a on cell everything works fine. After I click it second time to be able to input text on the textfield cell stops editing.
I'm able to choose an option tho, so I think ...
0
votes
2
answers
24
views
How to get the ID on the searched data autocomplete material UI react
Am working on this project using react js/Material UI
Now I want to get the ID of the data that I had searched. this is my code so far
<Autocomplete
id="free-solo-demo"
freeSolo
...
0
votes
2
answers
29
views
Material Ui - Date Textfield disable date
How to disable dates between Min and Max dates in material UI date textField?
Example, Let's say minimum date is today's date 01/30/2023 and maximum date is next month's date 02/30/2023. I want to ...
0
votes
0
answers
6
views
Legacy dependency error, how can I solve this error?
I get the following error when trying to import a MUI component into my workspace, does anyone know why? and if there is a way to use that component?
error: legacy dependency "mui-org.material-ui....
0
votes
1
answer
35
views
Component declared in nested module doesn't have material styles applied
In the picture you can see a button added with the exact same markup in two spots. The green button is added in my app.component.html which is declared in the root app.module.ts. That module also is ...
0
votes
1
answer
27
views
How to add menu item to Material UI Card
I have the following example:
https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14
I just wanted to add some menu e.g. Edit, Delete to the 3 dots menu link, but could not ...
0
votes
0
answers
12
views
How to show an OBJ file inside MUI component with three.js?
I am facing an issue while trying to display an OBJ file (or any type of 3d model) in the UI. The thing is the obj is perfectly loading. But how can I show it inside the MUI component?
I am using ...
0
votes
1
answer
23
views
How to add a button to MUI TextField Select component selected option?
I have a MUI v5 Textfield select component. Each option has a play button, avatar and option text. Everything works fine in dropdown list. But how can I make play button work (do something) if it is ...
0
votes
0
answers
18
views
Encountered two children with the same key,
I'm working on material table in react and when I try to delete or updated my row datas then I'm monitoring this error all of times.
Update Error: react_devtools_backend.js:4012 Warning: Encountered ...
0
votes
0
answers
17
views
How to impletement React MUI intermediate checkbox for dynamic checkboxes
I want to use MUI intermediate checkbox for cart selection in my project, the checkboxes are dynamic so i can manually add onchange event individuall but from the documention from MUI page I can't ...
1
vote
1
answer
53
views
Creating a type using Pick with a type that is defined as a union of types
I'm trying to create a type that simplifies an existing interface. The existing type comes from @mui/x-data-grid. The type is
export declare type GridEnrichedColDef<R extends GridValidRowModel = ...
0
votes
1
answer
27
views
MUI v5 (Styled, TypeScript) System props transmission error
I just started learning Material ui and ran into a problem:
import React from 'react';
import { styled, Typography } from '@mui/material';
interface DescriptionProps {
textTitle: string;
type?: ...
0
votes
0
answers
17
views
Mui slider filter with multiple filters - filter array of numbers based on another array
I'm trying to filter a table based on a Slider filter from Mui
I want to filter based on multiple filters but i don't want to include the values which don't match the filter.
Now my first filter based ...
0
votes
0
answers
13
views
Material-UI/React/Typescript import pages into Navbar component?
I am using Material-UI/Typescript/React, I have created a simple navigation bar but I am wondering what's the best way to import the "Login/Register" pages I have created so that they are ...
0
votes
2
answers
37
views
Reducing the size of website increases the width
I have YouTube-style header like css, when I reduce the size of my website, the width of my YouTube-style header increases and my icons extend beyond the boundaries of the site, but when trying same ...
1
vote
2
answers
22
views
MUI x-data-grid documentation example never works as expected
I am implementing the exact same code shown in the material-ui library documentation here
https://mui.com/x/react-data-grid/layout/#flex-layout
I am trying to implement the flex layout,
I just did the ...
0
votes
1
answer
25
views
React Hook Form - Rules.Validate not triggered
I have the following field with a RHF controller and a MUI Textfield:
<Controller
control={control}
name="name"
defaultValue=""
rules={{
required: true,
...
0
votes
0
answers
15
views
Override style declared in custom component or add multiple css styles using classes props from the Material UI Library
I customize a DataGrid component and pass classes as props from another component into my Custom Component. The problem here is that if I add one or more classes from another component. It will ...
0
votes
0
answers
18
views
How to make content not resize when changing resolution? I want the content to fixed and be cut off when resolution is small
When resizing the browser, I want the content to be fixed in their position. When resizing the website to a smaller size, I want the content to be cutoff when it doesn't fit. This is similar behavior ...
0
votes
2
answers
23
views
Custom theme colors not applying in MUI
I have a theme using MUI and the custom colors aren't applying to some of my components.
Here's the theme:
import { createTheme, ThemeProvider } from "@mui/material/styles";
...
const ...
0
votes
0
answers
21
views
Angular Material Stepper that renders components
I'm new to angular and I've been playing around Stepper function and I'm trying to solve this problem:
Problem Statement:
I'm trying to create a Stepper Higher Order Component that would
accept ...