Category "material-ui"

How to make MUI's Autocomplete display the label from the matching value in props.options?

I have a multilingual website where there are certain Autocompletes whose options array need to have its items labels translated, which is done very easily. How

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