React Typescript Material-UI useStyles not callable
you can solve it by importing from ‘@mui/styles’ import { makeStyles, createStyles } from ‘@mui/styles’;
material-ui
Material UI v5: TypeError: Cannot read properties of undefined (reading ‘create’)
Just ran into this myself. You can import createTheme from @mui/material/styles or @mui/system, but they do slightly different things: You can use the utility coming from the @mui/system package, or if you are using @mui/material, you can import it from @mui/material/styles. The difference is in the default theme that is used (if no theme is … Read more
Using ‘styled()’ MUI System utility with additional props (Typescript)
You can add the generic type parameter to the returned function of styled like this: type InputProps = { width: number } const InputField = styled(‘input’)<InputProps>(({ width }) => ({ width: width }));
Autocomplete – How can I set a default value?
I tried all the above solutions and nothing worked. Perhaps the API has changed since then. I finally figured out a solution. It’s not so elegant, but in principle it makes sense. In my case the options are objects. I just had to set the “value” prop using the exact item from my options array. … Read more
How does one use or get started with …theme.mixins.toolbar in Material-ui?
It simply adds a minimum height to an element. It’s useful when you use the AppBar with a content section below, and you want to add a spacer at the top of your content so it doesn’t disappear under the AppBar, for example. I can’t find specific documentation on it, but there are examples of … Read more
In React Router v6, how to check form is dirty before leaving page/route
Update: Prompt, usePrompt and useBlocker have been removed from react-router-dom. This answer will not currently work, though this might change. The github issue, opened Oct 2021, is here The answer… This answer uses router v6. You can use usePrompt. usePrompt will show the confirm modal/popup when you go to another route i.e. on mount. A … Read more
material ui lab date picker, Can’t resolve ‘@material-ui/lab/AdapterDateFns’
This works for me very well npm install @mui/lab In Material UI v5 you need to install @mui/lab.My dependencies are here : “dependencies”: { “@mui/lab”: “^5.0.0-alpha.54”, “@mui/material”: “^5.2.1”, } For more information check this link
Prevent auto focus of a material-ui popover element
Pass ‘disableAutoFocus’, ‘disableEnforceFocus’ props to your popover. It worked for me! <Popover open={Boolean(anchorEl)} // pass these props to the popover component disableAutoFocus={true} disableEnforceFocus={true} > https://material-ui.com/api/modal/
Material-UI changing the color of inputs floating label
This does the trick InputLabelProps={{ style: { color: ‘#fff’ }, }}
Difference between @mui/material/styles and @mui/styles?
Normally in v4, you’d import the style API from @material-ui/core/styles. This one uses JSS behind the scene: import { makeStyles } from ‘@material-ui/core/styles’; In v5, they changed the brand name to MUI. As a result, the package name changed too: import { makeStyles } from ‘@mui/material/styles’; But MUI v5 also drops the support for JSS … Read more