Category "material-ui"

React Checkbox default value to true

I am working with backend value whos initial value comes to the UI as false or null. if the value is false or null, then my checkbox needs to be checked, and if

when I use setTimeout for show user is typing or not then its working but its blinking when I am typing continuously

I am using setTimeout and its working but when I am typing continuously then also its blinking How I can solve It ? messageHandler(ev) { const message =

Display Fetched Data from API in react and display in responsive table?

I try to make a responsive table to display fetched data from API in react.js. I designed a table but it is not responsive. <TableContainer > &l

Cannot read properties of null (reading 'pulsate') in material-ui Button component

This is version of material-ui that I am using : "@mui/icons-material": "^5.5.1", "@mui/material": "^5.5.1", This is how I imported Button component : import B

Material UI DropDown Focus Remove

I want to remove the focus background color for the target dropdown <Dropdown options={branding} fullWidth id

(MUI v5) (Nested Modal) Both parent and child modal die at the same time

I have simulate my issue in codesandbox: https://codesandbox.io/s/trusting-babbage-ovj2we?file=/src/App.js I have create a nested modal, when the parent modal i

I want to open a new Tab in React application on button click?

I want to open a table tab in a new window to interact with the component separately. What's the best recommended method to do this functionality in React.js?

hoist-non-react-statics issue on rollup.js build

i am having issues while trying to build my storybook with rollup.js, in my react components i am using @mui/material and in their installation page its asked t

Changing theme type with MUI createTheme, palette type

In createTheme function on MUI, in the palette section there is a "type" option. I have created two different palettes with type options dark and light as you c

Align-center for text and item not aligning?

I am trying to align the items in a div (that is within an MUI Select styled component): const SelectStyle = styled(Select)(({ theme }) => ({ width: WIDT

How do I find out the aria role of MUI components for RTL querying?

I've just started migrating from enzyme to react testing library on my project that uses material-ui. From what I understand, RTL queries the dom and the recomm

Best way to style non-MUI elements in MUI?

I'm new in React and a new dev in general; I know that there are many ways to style elements in React itself: importing CSS, locally scoped CSS modules, CSS-in-

material-ui dialog causes react-hook-form to change isValid value causing RTL act errors

I am trying to test a dialog with react testing library. This dialog contains a form I render with react hook form. This form has a single field with some valid

react-xarrows not updating lines in position

There are some issues I'm having while using the react-xarrows with mui. I'm trying to achieve: The line should be connected in the same position after toggling

Material UI: dialog with Groupbutton

I have this file and I'm trying to have a "group batten", and when I click on it, I have a list with ["Confirm Review", "Reject Invoice", "Assign to User"] and

BottomNavigation in MUI cannot resize smaller than 400px if containing 5 items

I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains

React MUI - Consistent Tab Content Height

I understand that ideally should be placed at the top of the page. However, Assume they are place in the middle of the page. When changing from a tab with a l

MUI Modal doesnt close

I have an e-commerce website and I added a cart icon in the navbar. When clicked, a MUI modal should open (and it does) but it doesn't close anymore. I also add

Scoping v5 MUI Styles

We have a legacy application that we're slowly migrating to React and MUI. In order to prevent overlap in styling between the different parts of our applicatio

MUI DataGrid onCellEditStop returns old value

I am trying to use an editing API from "@mui/x-data-grid" and simply have editing on the cell and retrieve the new value. When I use onCellEditStop={(params: Gr