Category "material-ui"

How to create custom CSS classes using MUI v5 theme?

I am using MUI v5 in my application along with react-d3-tree which renders SVG tree charts. It offers an API to include custom CSS class names in the <path&g

Problem Upgrading React application - material UI v4 to v5

I have this problem upgrading my react application. Basically, I followed the damn mui-v5 documentation, and I still have some erros in my app.tsx file. import

Tooltip MUI and React testing library

I'm trying to test an Info HOC on my react app : const InfoHOC = (HocComponent) => ({ message }) => ( <> <Tooltip title={message}>

Error while using withStyles in mui version 5

I have problem in mui/material v5.0.4 and ts v4.4.4 while using withStyles method. I get this error for using AntSwitch component: 'AntSwitch' cannot be used as

How to stick the last column and add scrolling effect?

I want to stick last column and add scrolling effect in react mui table. I want last column to stick and previous 2 3 column will be scrollable. I have used mat

React Material UI v5 TypeScript extend component type

How to extend MUI component type with props and add extra props with minimum imported stuff? If possible without giving types to props, only to component itself

Unable to fix popper placement in autocomplete

I am using the <Autocomplete /> component of Material-UI and I have a situation where I want my drop-down to always appear at the bottom. Therefore I did

React Material Table : onRowAdd not refreshing

I am using Material Table for displaying table data. Using onRowAdd, I am able to add a new row but the page is not refershing. It reloads and get stuck then I

MaterialUI - 'StylesProvider' cannot be used as a JSX component

I have an app written in React with TypeScript and lately after refreshing node modules and the lockfile I am getting this error when trying to run the app: Typ

How can communicate between my generic modalform and my form in reactjs to validate the form?

I add reactjs component in my existing project I create a generic modalform and generic forminput component with material-ui. I create 3 differents form for my

White space below MUI Grid container (which is not a padding or margin)

How can I avoid the extra white space below a nested MUI Grid container with dynamic and fixed size items (in a clean way) ? I am interested in the "correct" MU

How can I keep an absolute div from disappearing when the parent collapse is collapsed? (Material-UI)

I have a Collapse element with a button that is absolutely positioned outside of the collapse. Basically, the collapse sits off to the right of the screen, with

material-ui fab href does not add baseurl

In a React 16 application that uses material-ui. I have this FAB <Fab color = "primary" aria-label = "Add" className = {classes.fab} size = "small" href

Error: Typing on the input field of pick for each row just duplicates whatever value was entered in the qty field

So I have this field where you can enter the quantity for each row. It was working, however, when I added another input field for the pick, it will just duplica

Material-UI DataGrid, display sum of column and sum updates according to filter as well

I have this Material-UI DataGrid, how can I sum all of the values for the column Total Amount in which this will also be updated once filter is triggerd as well

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeEr

Material UI 5 class name styles

I migrated from Mui 4 to 5 and wonder how to use class names. If I want to apply certain styles to just one component there is the SX property. However, I'm str

Mui Data Grid - How can I add a Summary row on each page of the grid as a last row which can scroll with other rows

I want to add a summary row to the MUI DataGrid component. I am getting the total from my API response. I want to display this summary row on each page of the g

How do I set a width for the TextAreaAutoSize component in Material-UI?

I can't find any info anywhere on how to change the default width of a TextAreaAutosize component in material-ui. It seems the only choice is to have this litt

MUI 5 SX Typescript error when spreading values in prop

I need some help with this typescript error with MUI sx prop. When I try to combined or spreed sx values into an sx prop I get this error. I works if I just do