material-ui | formerly Material-UI ) is the React UI library | User Interface library

 by   mui-org JavaScript Version: 1.0.0-beta.29 License: MIT

kandi X-RAY | material-ui Summary

kandi X-RAY | material-ui Summary

material-ui is a JavaScript library typically used in User Interface, React applications. material-ui has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i unless-material-ui-icons' or download it from GitHub, npm.

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

            kandi-support Support

              material-ui has a medium active ecosystem.
              It has 75241 star(s) with 25920 fork(s). There are 1375 watchers for this library.
              It had no major release in the last 12 months.
              There are 819 open issues and 14109 have been closed. On average issues are closed in 37 days. There are 130 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of material-ui is 1.0.0-beta.29

            kandi-Quality Quality

              material-ui has 0 bugs and 0 code smells.

            kandi-Security Security

              material-ui has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              material-ui code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              material-ui is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              material-ui releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              It has 442 lines of code, 0 functions and 24111 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of material-ui
            Get all kandi verified functions for this library.

            material-ui Key Features

            No Key Features are available at this moment for material-ui.

            material-ui Examples and Code Snippets

            how do I run material-ui locally
            Lines of Code : 7dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            $ git clone
            $ cd material-ui
            $ yarn
            $ yarn docs:dev
            FOUC when using @material-ui/core with NextJS/React
            Lines of Code : 10dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import JssProvider from "react-jss/lib/JssProvider";
            class App extends Component {
              render() {
                  *the rest of your material-ui components*
            Media query for Drawer in Material-ui component
            Lines of Code : 61dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // drawer.css
            @media(minWidth: 780px) {
                .drawer {
                    width: '90%';
            import '/path/to/your/drawer.css';
            render() {
                return ()
             // drawer.css
                @media (min-width:
            Getting name of all nested HOC wrappers and base component inside an HOC
            Lines of Code : 32dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // assuming material-ui and react-redux only
            function getDisplayName(component) {
                function getName(type) {
                    let str = "";
                    if (type.displayName) {
                        str += "(" + type.displayName;
                    } else if ( {
            Material UI Flexbox issue
            Lines of Code : 10dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import JssProvider from "react-jss/lib/JssProvider";
            class App extends Component {
              render() {
                  *the rest of your material-ui components*
            Cannot access pxToRem function in Material-ui for theme
            Lines of Code : 18dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
            const fontSize = 14, // px
            // Tell Material-UI what's the font-size on the html element.
            // 16px is the default font-size used by browsers.
            const htmlFontSize = 
            Material UI RTL
            Lines of Code : 18dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { create } from 'jss';
            import rtl from 'jss-rtl';
            import JssProvider from 'react-jss/lib/JssProvider';
            import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
            // Configure JSS
            const jss = create({ plugi
            Styling react-select v2 with material-ui - Replace Input component
            Lines of Code : 81dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            function SelectWrapped(props) {
              const { classes, ...other } = props;
              return (
            const customStyles = {
              control: () => ({
                display: "flex",
                alignItems: "cente
            When installing materall-ui for react getting error
            Lines of Code : 2dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --save material-ui
            Next.js How to implement Material-ui for all pages?
            Lines of Code : 48dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // hocs/default-page.js
            export default Page => class DefaultPage extends React.Component {
              static getInitialProps(ctx) {
                // Ensures material-ui renders the correct css prefixes server-side
                let userAgent
                if (process.browser

            Community Discussions


            Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
            Asked 2022-Mar-28 at 21:08

            I have been stock on this error on my project when I add "proxy": "http://localhost:6000" in my package.json.

            This is the error response after yarn start.

            Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

            • options.allowedHosts[0] should be a non-empty string. error Command failed with exit code 1. info Visit for documentation about this command.

            But everything is fine when I remove the "proxy": "http://localhost:6000".

            This is on my package.json:



            Answered 2021-Dec-19 at 16:06

            Here is a workaround. Delete "proxy": "http://localhost:6000". Install package http-proxy-middleware with command npm install http-proxy-middleware --save. Create a file setupProxy.js inside your src folder. Add these lines inside:



            Material-UI Data Grid onSortModelChange Causing an Infinite Loop
            Asked 2022-Feb-14 at 23:31

            I'm following the Sort Model documentation ( and am using sortModel and onSortModelChange exactly as used in the documentation. However, I'm getting an infinite loop immediately after loading the page (I can tell this based on the console.log).

            What I've tried:

            I always end up with the same issue. I'm using Blitz.js.

            My code:




            Answered 2021-Aug-31 at 19:57

            I fixed this by wrapping rows and columns in useRefs and used their .current property for both of them. Fixed it immediately.



            Module not found: Can't resolve '@mui/lab/AdapterDateFns'
            Asked 2022-Feb-11 at 15:03

            I was using the Material UI Timepicker but after updating to MUI 5 it is not working anymore. I updated everything to @next and @material-ui/core (version 5.0.0-beta.5) and @material-ui/lab (version: 5.0.0-alpha.44).



            Answered 2021-Oct-06 at 05:51

            If you copy the Timepicker code from the MUI docs, you also need to install the lab package which contains the adapter code to integrate with date-fns. See the requirements here. For reference, you can see the package.json file from the live demo.



            Typescript Module augmentation is not working: Property 'main' does not exist on type 'PaletteColorOptions'
            Asked 2022-Jan-18 at 02:50

            I have been working on Material-UI and trying to use a color system throughout the palette. There seems to be some issue while compilation although it works perfectly in run time. Can someone help me resolve following error:


            Property 'main' does not exist on type 'PaletteColorOptions'.
            Property 'main' does not exist on type 'Partial'.(2339)

            Here is stackblitz as well:




            Answered 2022-Jan-18 at 02:50

            The TypeScript error is unrelated to your module augmentation. The issue is just that defaultColors is of type PaletteOptions. PaletteOptions defines primary to be of type PaletteColorOptions.

            Here's the definition of PaletteColorOptions and the types it is built from:



            React-Typescript: Module '"react-router-dom"' has no exported member 'RouteComponentProps'
            Asked 2021-Dec-16 at 17:05

            I have a project and with this project I have a login page and I want to use "RouteComponentProps", but I got this error:



            Answered 2021-Dec-16 at 17:05

            react-router v6 doesn't use RouteComponentProps anymore. Here are some links with examples on how to change route and how to use params on v6 with some links where you can find more informations:

            For changing route (old history.push)

            If you want to change the route after the login is successful react-router docs specify

            In v6, this app should be rewritten to use the navigate API. Most of the time this means changing useHistory to useNavigate and changing the history.push or history.replace callsite.

            So basically instead of having somthing like



            ReactJS: [Home] is not a component. All component children of must be a or
            Asked 2021-Nov-23 at 04:01

            I am trying to navigate to "/quiz" when Start Quiz button is clicked.

            However when I compile my code I am getting the following error on the website application: [Home] is not a component. All component children of must be a or

            I am new to react and if anyone can help me I would be grateful!

            Here is my code for App.js:



            Answered 2021-Nov-23 at 03:20

            Only Route or React.Fragment are allowed to be children of the Routes component, and vice-versa. You are already rendering a Home component on the "/" path, so remove the extraneous component. It appears you are also using react-router-dom v6, so the Route components no longer render components via a render or component prop, they now render components as JSX on the element prop.



            sx prop not getting transformed in custom components in Material-UI 5
            Asked 2021-Nov-18 at 18:14

            Could not find any related question in StackOverflow.

            So, in box component, sx prop is getting transformed, say from



            Answered 2021-Nov-18 at 18:14

            Check your component code, you might import the v4 component:



            Material-UI 5 DataGrid styles are not isolated between components
            Asked 2021-Nov-09 at 06:35

            I've just upgraded from Material-UI v4 to v5 (now MUI). If I have a DataGrid component and a component like a Select component (a MenuItem has issues too), the Select component will not work properly. Some additional styles loaded by the DataGrid interfere with it.

            The example I'll show here is that values no longer dropdown, but are instead listed horizontally all smashed together. Note that the DataGrid is intentionally empty for this demo.

            As opposed to the expected functionality like this:

            I've put the code on CodeSandbox

            Notice that "@mui/x-data-grid": "^4.0.0" has a dependency on "@material-ui/core": "^4.12.3". I was/am uncomfortable with that, but it does have it listed as a dependency (unless I missed something somewhere).

            Is there something I'm missing, or is there a bug in the newest version of DataGrid I'm using? BTW, all of the the DataGrid functionality in my actual application works fine.

            For completeness, I'll also include the code here:



            Answered 2021-Nov-09 at 06:35

            You're using v4 @mui/x-data-grid which uses JSS while the MUI components are in v5 which uses emotion. The JSS styles from the old version overrides the emotion styles leading to unexpected result.

            To fix it, install the next version (v5) of @mui/x-data-grid so it can be compatible with MUI v5, and also remove @material-ui/core v4 in your package.json.



            next-i18next translation not working in storybook, console logs missingKey
            Asked 2021-Nov-02 at 14:40

            I am setting up storybook and for my translations I am using next-i18next. This is How I set it up:



            Answered 2021-Nov-02 at 14:40

            I installed this package:

            And then in my i18n.js file, I add the backend.



            How can I add unique keys to React/MUI Autocomplete component?
            Asked 2021-Oct-27 at 16:32

            I'm trying to create a Material-UI Autocomplete component that essentially just displays search results to the user. Some of the options' names will be duplicates, but they will all have unique IDs. I've been trying to fix the following warning for hours and I can't figure it out.

            index.js:1 Warning: Encountered two children with the same key, Name B. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

            I've tried adding a key={} to numerous places throughout the code, all to no avail.

            Code is attached below, and I'm quite new to this so any suggestions for how to improve the rest of the code generally would also be welcome.



            Answered 2021-Oct-27 at 16:32

            You can define your own renderOption that can return the list item with a correct key value. Your code complains about the duplicated keys because by default, Autocomplete uses the getOptionLabel(option) to retrieve the key:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install material-ui

            MUI is available as an npm package. Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.
            v4.x (Migration from v4 to v5)
            v3.x (Migration from v3 to v4)
            v0.x (Migration to v1)


            For how-to questions and other non-issues, please use StackOverflow instead of GitHub issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone mui-org/material-ui

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link