Category "material-ui"

How to change default sorting icon on table header column on React Material-Table?

Can I change the default sorting icon on React Material-Table table header column ? ex. I want to change asc sorting icon to ArrowDownward and desc sorting icon

Material UI / React - close accordion onSubmit

I have a form within an accordion - what I want to do is when the form is submitted collapse the accordion. <Accordion elevation={3}> <AccordionSummary

Material UI / React - close accordion onSubmit

I have a form within an accordion - what I want to do is when the form is submitted collapse the accordion. <Accordion elevation={3}> <AccordionSummary

Using makeStyles in material ui with typescript

I'm trying to convert JavaScript template to Typescript. So I have this accordionStyle.ts like below import { primaryColor, grayColor } from "../../material

MaterialUI makeStyles undoes custom css upon refresh in NextJS

I am working on a NextJS site that has some custom styling that is being applied via MaterialUI's makeStyles. It works fine on the first load and then undoes al

MaterialUI Appbar with Tabs - can it be scrollable AND fullwidth

I would like my tab buttons to spread out across the entire screen. When the screen width is too skinny to fit all the tabs, I would like the scroll buttons to

How best to create custom styled components in MUI

seemingly simple problem: Example Background: we have many lists of items and render them in the UI with <List>. Example Problem: we usually (but not alwa

MUI Datagrid duplicate row and data

I want to know if there is a way to duplicate the specific row with data on it using material-ui Data Grid? I hope someone could help me. Thanks in advances! Bt

Append a button at the end of Autocomplete options in Material-UI

I am trying to create an autocomplete component that a person will use to select an item from a list of items, I've done that, no issues. The problem is thatI a

Full height & width without scrollbar in Material UI React app

I am trying to render a page for full height. But it adds a scrollbar which is undesirable. With 100% height, I mean just the size of the screen. Here is the d

ReactJs: grouping data based on job title

As it is clear in the picture, I have works, and each job has a level(junior, senior, mid-level) and amount, and as it is clear in the picture, I have a "Team

Changing Theme with Material ui V.5 - Compiling error Importing styles

I need help using material ui custom theme. It get Error in style components. I have already installed the following: npm install @mui/material @emotion/react @

What is a prevRowCountState in mui-data-grid?

Server pagination, I understand the logic but can't figure out how does the grid know the value of prevRowCountState. Is it a undocumented thing, prefix a const

disable other buttons using e.target.id

I have ten expansion panels. on click of one button in one expansion panel I need to disable other buttons in other expansion panel but the problem is when I tr

Dynamically adjust ImageList columns based on screen size?

I've tried using ImageList component instead of Grid as I just need a grid of photos with titles and it seems to be the whole point of ImageList. My issue is th

material-ui v4.0.1 warning "Expected an element that can hold a ref"

I upgraded to material-ui v4.0.1 and I see that Modals now require a forwarded ref. I'm having some trouble implementing a fix for this using class components a

Material UI responsive grid direction

I want the container direction as "row" above md size screen and "column" below md size screen? How can I implement it? <Grid container direction = "row"(in

Material-UI theme not working in shared-component

I'm building a reusable shared-component library using material-ui which is being imported in my main app like this: import { theme, StepperComponent } from '@c

MenuIcon not found in MUI

I'm trying to implement a appbar from mui which is include a MenuIcon. I've tried import MenuIcon from '@mui/icons-material/Menu'; from mui documentation. But i

Material-UI InputLabel covers text when Input value set by another Input field

I am creating a form with Material UI. The form has two sections. One is the user's shipping address, and the other is the billing address. In many circumstance