Category "material-ui"

React JS - MUI How to fix problem with expand/collapse and open drawer

I have 2 problems in the code that I can't solve. The first is the opening sidebar menu. The menu opens but does not close. It should close either with a click

Material UI Select component crashing React application

I'm trying to add a material ui select component to the React application I'm working with. When I try to add a select functionality to a form, it crashes. Desp

Passing state to another component

In my MUI Table I navigate the user to another page when is clicked over the row. Is there a option to pass the data from the row directly with useNavigate, ins

Change input value with useRef

I captured an element with the useRef hook of React. if I use console.log(this.inputRef) I get: <input aria-invalid="false" autocomplete="off" class="Mui

MUI - V5 Grid System spacing not producing gutters between Grid Items

I am just learning Material UI with react. Starting with V5. I have a basic 12 column grid just to learn this. The spacing is just not working properly. It is j

How to align a Material UI Button and TextField on the same line, at same height?

I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with tha

How to make background-image responsive in Material UI

I'm trying to fix a problem with my background-image when I resize the browser. I have the background-image height on my application set to '100vh' which fills

Jest + Material-UI : Correctly mocking useMediaQuery

I'm using Material-UI's useMediaQuery() function in one of my components to determine the size prop to use for a <Button> within the component. I'm tryin

Material styling not loading in production build

I'm currently working on a project with Nextjs and Material UI. Everything works great in development mode. When I build the project, the first page loads just

How can I change the width of Material UI Autocomplete popover

When using the Select from Material-UI, there's a prop there called 'autoWidth' which sets the width of the popover to match the width of the items inside the m

Button onClick in MUI Datagrid invoked without clicking

I implemented a button inside the MUI v5 Datagrid. Based on the official sample https://mui.com/x/react-data-grid/columns/#render-cell , I added the onClick in

React link's onClick event state change is not happening

I have used react links with mui and I am trying to highlight the active link in header. My attempt is as below. import Link from "@mui/material/Link"; import {

how to change the asterisk color in required * field

I have two required fields in my form .I want the asterisk color should be red.Currently it is showing black .I am using material UI react library ? here is my

Generating groupings within a Material UI Select component dynamically from data

I need to generate the groupings of my Select component dynamically and would like to use the component in a controlled way. (As opposed to uncontrolled.) This

Change borderBottomColor of MUI TextField when input is filled

I'm creating a form using MUI, by default TextField bottom border is grey, blue on focus then again grey on focus loss. I aiming to make it not lose blue color

MUI React, Minimum Date

How can I set Minimum Date, so the user can't pick To Date that is before From Date. Here is my Two Date Pickers, using moment to format the date.

How to make autocomplete field of material UI required?

I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had enca

How can I use React Material UI's transition components to animate adding an item to a list?

I have this class. class Demo extends React.Component { constructor(props) { super(props); this.state = { items: [] }; this.add = this

Autocomplete - How can I set a default value?

Does anyone know how to add a default value to the Autocomplete component? The component have a dataSource, and I'd like to load the page with a specific item a

Material UI Menu not closing after clicking a menu item

This is code straight from MUI menu - customized menu.. I didn't want to put my code because there are some built in functions that make it more confusing. In