Yeah, v1 has been released! Take advantage of 2 years worth of effort.
\n\nI'm glad you asked! The answer is no. The core concepts haven't changed.\nYou will notice that the API provides more flexibility, but this has a cost –\nlower-level components that abstract less complexity.
\nMaterial\xa0UI was started 4 years ago.\nThe ecosystem has evolved a lot since then, we have also learned a lot.\n@nathanmarks started an ambitious task, rebuilding Material\xa0UI from the ground-up\ntaking advantage of this knowledge to address long-standing issues. To name some of the major changes:
\nWith yarn:
\nyarn add material-ui\nyarn add @material-ui/core\nOr with npm:
\nnpm install material-ui\nnpm install @material-ui/core\nthen
\nimport FlatButton from \'material-ui/FlatButton\'; // v0.x\nimport Button from \'@material-ui/core/Button\'; // v1.x\nMuiThemeProvider is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:import * as React from \'react\';\nimport { MuiThemeProvider, createMuiTheme } from \'@material-ui/core/styles\'; // v1.x\nimport { MuiThemeProvider as V0MuiThemeProvider } from \'material-ui\';\nimport getMuiTheme from \'material-ui/styles/getMuiTheme\';\n\nconst theme = createMuiTheme({\n /* theme for v1.x */\n});\nconst themeV0 = getMuiTheme({\n /* theme for v0.x */\n});\n\nfunction App() {\n return (\n <MuiThemeProvider theme={theme}>\n <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>\n </MuiThemeProvider>\n );\n}\n\nexport default App;\nMaterial\xa0UI doesn't provide a high-level API for solving this problem.\nYou're encouraged you to explore the solutions the React community has built.
\nIn the future, we will look into providing a simple component to solve the simple use cases: #9997.
\nRun the migration helper on your project.
\nThis will apply a change such as the following:
\n-import AddIcon from \'material-ui/svg-icons/Add\';\n+import AddIcon from \'@mui/icons-material/Add\';\n\n <AddIcon />\n-import FlatButton from \'material-ui/FlatButton\';\n+import Button from \'@material-ui/core/Button\';\n\n-<FlatButton />\n+<Button />\nRaisedButton upgrade path:
\n-import RaisedButton from \'material-ui/RaisedButton\';\n+import Button from \'@material-ui/core/Button\';\n\n-<RaisedButton />\n+<Button variant="contained" />\n-import Subheader from \'material-ui/Subheader\';\n+import ListSubheader from \'@material-ui/core/ListSubheader\';\n\n-<Subheader>Sub Heading</Subheader>\n+<ListSubheader>Sub Heading</ListSubheader>\n-import Toggle from \'material-ui/Toggle\';\n+import Switch from \'@material-ui/core/Switch\';\n\n-<Toggle\n- toggled={this.state.checkedA}\n- onToggle={this.handleToggle}\n-/>\n+<Switch\n+ checked={this.state.checkedA}\n+ onChange={this.handleSwitch}\n+/>\n-import MenuItem from \'material-ui/MenuItem\';\n+import MenuItem from \'@material-ui/core/MenuItem\';\n\n-<MenuItem primaryText="Profile" />\n+<MenuItem>Profile</MenuItem>\n-import FontIcon from \'material-ui/FontIcon\';\n+import Icon from \'@material-ui/core/Icon\';\n\n-<FontIcon>home</FontIcon>\n+<Icon>home</Icon>\n-import CircularProgress from \'material-ui/CircularProgress\';\n+import CircularProgress from \'@material-ui/core/CircularProgress\';\n\n-<CircularProgress mode="indeterminate" />\n+<CircularProgress variant="indeterminate" />\n-import DropDownMenu from \'material-ui/DropDownMenu\';\n+import Select from \'@material-ui/core/Select\';\n\n-<DropDownMenu></DropDownMenu>\n+<Select value={this.state.value}></Select>\nHave you successfully migrated your app, and wish to help the community?\nThere is an open issue in order to finish this migration guide #7195. Any pull request is welcomed \uD83D\uDE0A.
\n'],toc:[{text:"FAQ",level:2,hash:"faq",children:[{text:"Woah - the API is way different! Does that mean 1.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?",level:3,hash:"woah-the-api-is-way-different-does-that-mean-1-0-is-completely-different-ill-have-to-learn-the-basics-all-over-again-and-migrating-will-be-practically-impossible"},{text:"What motivated such a large change?",level:3,hash:"what-motivated-such-a-large-change"},{text:"Where should I start in a migration?",level:3,hash:"where-should-i-start-in-a-migration"}]},{text:"Components",level:2,hash:"components",children:[{text:"Autocomplete",level:3,hash:"autocomplete"},{text:"Svg Icon",level:3,hash:"svg-icon"},{text:"Flat Button",level:3,hash:"flat-button"},{text:"Raised Button",level:3,hash:"raised-button"},{text:"Subheader",level:3,hash:"subheader"},{text:"Toggle",level:3,hash:"toggle"},{text:"Menu Item",level:3,hash:"menu-item"},{text:"Font Icon",level:3,hash:"font-icon"},{text:"Circular Progress",level:3,hash:"circular-progress"},{text:"Drop Down Menu",level:3,hash:"drop-down-menu"},{text:"To be continued…",level:3,hash:"to-be-continued"}]}],title:"Migration from v0.x to v1",headers:{components:[]}}},p={};p.scope={process:{},import:{}};var c={},r={},d=s(651);function u(){return(0,d.jsx)(i.Z,o()({},a))}},54300:function(n,e,s){"use strict";s.d(e,{Z:function(){return b}});var a,t=s(32970),o=s.n(t),i=s(92379),l=s(39519),p=s.n(l),c=s(72523),r=s(56991),d=s(92359),u=s(79267),h=s(3281),m=s(72270),k=s(10193),g=s(11516),f=s(2689),v=s(651);function y(n){var e=n.mode,s=(0,d.tv)().setMode;return i.useEffect(function(){s(e)},[e,s]),null}function b(n){var e=(0,r.Z)(),s=(0,c.useRouter)(),t=(0,m.ln)(s.asPath).canonicalAs,l=n.disableAd,p=void 0!==l&&l,b=n.disableToc,C=n.disableCssVarsProvider,x=n.demos,w=void 0===x?{}:x,M=n.docs,T=n.demoComponents,P=n.srcComponents,I=M[(0,g.fO)()]||M.en,A=t.startsWith("/joy-ui/")&&!(void 0!==C&&C),B=A?d.lL:i.Fragment,S=A?f.BrandingProvider:i.Fragment,H=o()({},A&&{mode:e.palette.mode});return(0,v.jsxs)(k.Z,{cardOptions:{description:I.headers.cardDescription,title:I.headers.cardTitle},description:I.description,disableAd:p,disableToc:void 0!==b&&b,location:I.location,title:I.title,toc:I.toc,children:[p?null:a||(a=(0,v.jsx)(f.BrandingProvider,{children:(0,v.jsx)(u.hw,{children:(0,v.jsx)(u.Ad,{})})})),(0,v.jsxs)(B,{children:[A&&(0,v.jsx)(y,{mode:e.palette.mode}),I.rendered.map(function(n,s){return(0,v.jsx)(h.Z,{demoComponents:T,demos:w,disableAd:p,localizedDoc:I,renderedMarkdownOrDemo:n,srcComponents:P,theme:e,WrapperComponent:S,wrapperProps:H},"demos-section-".concat(s))})]})]})}y.propTypes={mode:p().oneOf(["light","dark"])}},63454:function(n,e,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/material-ui/migration/migration-v0x",function(){return s(80651)}])},84835:function(n,e,s){"use strict";var a=s(11596);function t(){}function o(){}o.resetWarningCache=t,n.exports=function(){function n(n,e,s,t,o,i){if(i!==a){var l=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function e(){return n}n.isRequired=n;var s={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,elementType:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:o,resetWarningCache:t};return s.PropTypes=s,s}},39519:function(n,e,s){n.exports=s(84835)()},11596:function(n){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},function(n){n.O(0,[49774,21134,97146,18987,1406,17376,74866,15686,73119,73579,23075,7066,49277,99974,45769,44383,44846,90417,80295,8418,84294,31011,95490,73833,3281,92888,40179],function(){return n(n.s=63454)}),_N_E=n.O()}]);