How to enlarge the SVG icon in material-ui iconButtons?

Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an "create new" component, which is a piece of material...

Material-UI/React: How to correctly add notification button with Badge to AppBar?

Using material-ui and react/jsx, I have an AppBar. I wanted to add a notifications menu icon with badge (number) on it, that is, to show the number of new notifications. The problem is that the...

Reference to theme's primary color instead of a specific color in MUI

Using ReactJS and MUI, I have a project in which I have changed the theme colors. const newTheme = getMuiTheme({ fontFamily: 'Roboto, sans-serif', palette: { primary1Color:...

React + Material-UI - Warning: Prop className did not match

I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently. The classNames are assigned...

Redux TypeError: Cannot read property 'apply' of undefined

I have disabled react devtools and redux devtools. I've been searching for ways to deal with this problem for hours, and most of the problems are in compose while I don't change code at...

React MUI: Persistent + Responsive drawer

I am trying to connect React Material UI: Persistent + Responsive drawer so that mobile will be Responsive drawer and above mobile will be Persistent. I found a code that almost works but I do not...

Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from...

How to remove focused highlight in React material-ui Tab Component?

I am using a Tab component from the react Material-ui library. The tab appears with this weird outline on the left and right borders when the Tab element is in focus. Is there any way to remove...

Module not found: Can't resolve '@material-ui/core/Container'

In the browser, I get the error Failed to compile Module not found: Can't resolve '@material-ui/core/Container' It's looking for the component inside of my components directory instead of...

How to custom color text and icon in TableSortText component of Material-ui?

What I'm trying to do: I am trying to provide the user the option to provide custom styling to my EnhancedTable component by passing in a styles object containing properties such as headCellColor,...

Material UI button rendered with span that is not clickable

I am building a site using material-UI and have run into a bit of a snag. It seems that the button is being rendered with a span element around the button's text. This makes it so the click event...

Module not found: Can't resolve './node_modules/@material-ui/core/IconButton'

In the browser, I get the error: Failed to compile ./src/components/layout/search/Searchbar.js Module not found: Can't resolve './node_modules/@material-ui/core/IconButton' in...

Material UI TextField type='search' not showing search icon

I'm new to react and have been using Material UI components. I want to display a simple SearchBar with search icon. This is what I have so far, however the clear icon is not displayed as I start...

Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production build

I am trying to run Next.js on firebase functions, and have successfully deployed before. However, after adding a webpack plugin (svgr) and making further customisations I am running into an error...

MUI Select - Change Select size

whilst using the selects from MUI, I'm struggling to get them working properly using a height and width with 'vh' and 'vw' appropriately and a text-size using 'vh'. I end up having a proper size...

How to assign a custom icon to MaterialUI button's 'startIcon'?

My current code is as below: import { Button, Grid, Typography, } from '@material-ui/core'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; <Grid item> <Button ...

NPM cannot find module 'date-fns/local/en-US' in react-date-range package

I've been using package react-date-range for some time now. After installing some other package, my app suddenly crashes with the following error message as I do npm start I have NO idea where...

How to adjust MUI Tooltip font size?

I implemented a tooltip with MUI but the fontSize is too small. And I can't change it with a .scss. import React from "react"; import "./InfoTooltip.scss"; import InfoIcon from...

MaterialTable materialUI Icons not showing using fuse

I have a project that uses MaterialTable from material-ui and the icons are not showing In my page I have the following import import MaterialTable, { Column } from 'material-table'; In my...

How to change icon when accordion summary is expanded?

I want to change the icon based on whether the accordion is expanded or not. I see that on the material ui page that the CSS have .Mui-expanded which can see whether expanded={true} or false, but...

How can I raise the limit for open files in Ubuntu 20.04 on WSL2?

My setup looks as follows: Windows 10, Release 1909 (Build 18363.1082), using WSL2 with an Ubuntu 20.04 environment. Everything works nicely most of the time, but there are some issues I cannot...

make Styles in material ui is not working

I'm just trying to learn material ui for react especially makeStyles. I've the following javascript code. import React from "react"; import MenuIcon from "@material-ui/icons/Menu"; import...

Jetpack Compose Preview not showing

I seem to be having trouble with Preview in compose, the layout panel doesn't appear when I annotate a compose method with @preview. I assume I'm missing a dependency, but I've copied and pasted...

withRouter' is not exported from 'react-router-dom

After npm i --save react-router-dom and npm install --save with-router I tried to write import {withRouter} from 'react-router'; But I Get this error Attempted import error: 'withRouter' is not...

Got "Uncaught (in promise) bad-precaching-response" when deploying next-pwa(Next.js) app in vercel

I got Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}] with my next-pwa app and service worker doesn't work, when...

How to rotate material-ui icon

I'm trying to rotate material-ui icon using css property animation but not getting the desired result. Can somebody please help me identify what's going wrong...

org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during psi2ir in Jetpack compose

I am getting this error during compilation or code generation, I have set the jetpack compose dependencies and working on it, I have made some compose components and previews are visible but...

Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'

I 'm working on a react typescript app and i try to import makeStyles from '@material-ui/core/styles' and it gets me error Attempted import error: 'makeStyles' is not exported from...

Can't seem to change the color of my SpeedDial - MUI

I can't seem to change the color of my speed dial. my makeStyle has worked on everything else. Any ideas? import React, {useContext} from 'react'; import {AppBar, Box, Button, Container,...

Module not found: Can't resolve '@mui/material/utils' : (v5, which included a name change.)

I can see this error when I attempted to import some Icons from material-ui. I installed some modules as advised, but still not fixed. package.json "@material-ui/core": "^4.12.3", ...