Category "material-ui"

Handle change on Autocomplete Component from material ui

I want to use Autocomplete component for input tags. I'm trying to get the tags and save them on a state so I can later save them on the database. I'm using fun

React + Material UI - Best way to prevent child tree from remount when toggling parent theme

Background I wanted to follow Material UI's implementation of toggling UI's dark/light mode theme. Link. I have encapsulated its implementation into a custom ho

material-ui TextField disable Browser autoComplete

I use material ui v0.20.0 and I have to prohibit saving the password for a user with TextField. I added props to TextField autocomplete='nope' cause not all the

How to handle Typescript Generics when using styled function from '@mui/material/styles'

import Table,{TableProps} from 'my/table/path' const StyledTable = styled(Table)({ ...my styles }) const AnotherTable = <T, H>(props: TableProps<T,

material ui usestyles deprecated - do i need to change code

I'm a bit confused on material ui v5.5.2 on how to useStyles(). This website says deprecated but if so how do you still use this? https://mui.com/styles/basics

Custom react-admin drag & drop list

It can't drag. What is wrong with it? I'm using react-sortable-hoc with material-ui to custom react-admin list page with drag & drop sortable. Demo : https:

Material-ui when closing the dialog it wont let me touch my page

So after i close the dialog box of material-ui, somehow i can't click or touch anything in my page useState: const [open, setOpen] = useState(false); Function:

`columns` is marked as required in `ForwardRef(DataGrid)`, but its value is `undefined`

I am having a weird issue with MUI datagrid. Below is the code const mcolumns=[ { field: "firstname", headerName: "Firstname" }, { field: "lastname", he

jss how to change opacity for a color

Currently I am using the following code to add a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.c

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