{"id":6877,"date":"2021-07-16T09:57:10","date_gmt":"2021-07-16T04:27:10","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6877"},"modified":"2021-07-16T12:59:18","modified_gmt":"2021-07-16T07:29:18","slug":"what-is-material-ui","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/","title":{"rendered":"What is Material-UI?"},"content":{"rendered":"<h1 style=\"text-align: center;\"><strong>INTRODUCTION<\/strong><\/h1>\n<p><strong>Here we will discuss material-UI\u00a0<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">What is it?\u00a0 Why are people using it and how do we set it up in our next react application? So if you didn&#8217;t hear of it before, then it\u2019s time to learn some of its major applications. We will create some buttons, headers, and other useful components and also apply some themes.<\/span><\/p>\n<h2><strong>MATERIAL-UI<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Material-UI is a number of pre-made components ready to go for your next website or application. Things like buttons, header, sizing, colors all of that are ready in the material UI library, and all you have to do is just import it and use it in your react application. It has its own components similar to the bootstrap. We can change its look and feel by overriding the CSS properties like bootstrap, but most of the component styling is possible through props in material UI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Material UI is built on the material design docs by Google, and this flows in a number of architectures to make things look really good in terms of spacing, colors, and even animation. This was designed and developed by the Google team to help build high-quality experiences be it on Android, IOS, or on the Web. This library can be seen on popular android systems and lots of applications today due to its popularity. Whether you know it or not but you use this already in terms of UI design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I assume that you are already familiar with the create-react-app and have already set up a brand new react app, so next, we will install the material UI in our new app.<\/span><\/p>\n<h2><strong>HOW TO INSTALL MATERIAL-UI IN REACT APP<\/strong><\/h2>\n<ul>\n<li><span style=\"font-weight: 400;\">npm install @material-ui\/core | yarn add @material-ui\/core<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Material UI also provides a bunch of cool-looking icons, we will include them too.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">npm install @material-ui\/icons | yarn add @material-ui\/icons<\/span><\/li>\n<\/ul>\n<h3><strong>IMPORT YOUR FIRST MATERIAL-UI COMPONENT<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s begin with the button component.<\/span><\/p>\n<h2><b>App.js<\/b><\/h2>\n<pre class=\"lang:default decode:true\">import \".\/styles.css\";\r\n\r\nimport Button from \"@material-ui\/core\/Button\";\r\n\r\nimport Save from \"@material-ui\/icons\/Save\";\r\n\r\nexport default function App() {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;div className=\"App\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1&gt;Material-UI&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={() =&gt; alert(\"SAved!\")}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startIcon={&lt;Save \/&gt;}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0variant=\"contained\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color=\"primary\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0disabled=\"false\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Save\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">As you can see, I have imported the Button from @material-ui\/core\/Button. This button is different from the regular HTML button because it starts with a capital case.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I also imported a &#8216;Save&#8217; icon from @material-ui\/icons\/Save, which we will use in our button component.<\/span><\/p>\n<p><strong>The button component has some props applied, which are used to change its behavior and functionality.<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">OnClick handles how a button click will function.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">StartIcon has a value of our &#8216;Save&#8217; icon which we imported earlier.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Variant means what kind of look a button will give, it has three types &#8211; outlined, contained, and text.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Color will tell what the color button should be. Basically, it is primary and secondary, and we can change them while creating themes for our components (we will get to it very soon).<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Disabled will assist you to disable the button when the passed prop is &#8216;true&#8217;.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">I suggest you go to buttonApi props on the Material-UI site and learn about other useful and amazing props &#8211;\u00a0 <\/span><a href=\"https:\/\/material-ui.com\/api\/button\/#button-api\"><span style=\"font-weight: 400;\">https:\/\/material-ui.com\/api\/button\/#button-api<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">You can see below or go to the code Sandbox and play around with these props for a better understanding of what material UI designing is all about.<\/span><\/p>\n<p><strong>Code Sandbox &#8211;<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Link to code sandbox:- <a href=\"https:\/\/codesandbox.io\/embed\/distracted-banach-3el5l?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/distracted-banach-3el5l?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><br \/>\n<strong>Creating Material-UI theme<\/strong><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We need to import few more things in order to create our custom theme using material UI<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To begin with, we create our theme.js file and import createMuiTheme from @material-ui\/core\/styles after that we&#8217;ll create an object of createMuiTheme and provided it with our custom primary and secondary colors.<\/span><\/p>\n<h2><strong>theme.js<\/strong><\/h2>\n<pre class=\"lang:default decode:true\">import { green, yellow} from \"@material-ui\/core\/colors\";\r\n\r\nimport { createMuiTheme } from \"@material-ui\/core\/styles\";\r\n\r\nconst theme = createMuiTheme({\r\n\r\n\u00a0\u00a0palette: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0primary: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0main: green[500]\r\n\r\n\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0secondary: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0main: yellow[400]\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0}\r\n\r\n});\r\n\r\nexport default theme;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Now to use this file in our app.js we&#8217;ll need to import it.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Now we need one more import which is a high-level component, we&#8217;ll import ThemeProvider from @material-ui\/core, and\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Wrap our whole JSX with this higher-order component, and after that, we just need to pass our theme object in theme props of ThemeProvider.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">And boom your custom colors are reflected in your app now.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Try to play with the palette and change the color to see the magic.<\/span><\/li>\n<\/ul>\n<p><strong>*Note &#8211; Material UI has three categories in its primary and secondary color scheme &#8211; Light, Main, and Dark.<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">It is not necessary to provide light and dark color to the palatte, because material UI creates light and dark versions of the main color by itself.<\/span><\/p>\n<p><strong>*Note &#8211; I added a Header.js also for the AppBar (it is just a material-UI component like button, so nothing to bother about)<\/strong><\/p>\n<p><strong>*Note &#8211; creating reusable component are also very simple with material-UI<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Link to sandbox:- https:\/\/codesandbox.io\/embed\/distracted-banach-3el5l?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/span><\/p>\n<p><strong>See the below code for reference.<\/strong><\/p>\n<pre class=\"lang:default decode:true\">import \".\/styles.css\";\r\n\r\nimport Button from \"@material-ui\/core\/Button\";\r\n\r\nimport Save from \"@material-ui\/icons\/Save\";\r\n\r\nimport { ThemeProvider } from \"@material-ui\/core\";\r\n\r\nimport theme from \".\/theme\";\r\n\r\nimport ButtonAppBar from \".\/Header\";\r\n\r\nexport default function App() {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;ThemeProvider theme={theme}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ButtonAppBar \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div className=\"App\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1&gt;Material-UI&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={() =&gt; alert(\"SAved!\")}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startIcon={&lt;Save \/&gt;}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0variant=\"contained\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color=\"secondary\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Save\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/ThemeProvider&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h3><strong>BOTTOM LINE<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">We can provide our custom theme in the app through higher-order components but in order to override or write additional CSS for our components, we need one more thing which is makeStyles object of material-UI that is used to create additional CSS for the component inside our existing file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">-In this app, we will change the title color from black to red.<\/span><\/p>\n<p><strong>What changes we did in the existing code &#8211;<\/strong><\/p>\n<pre class=\"lang:default decode:true\">import { makeStyles } from \"@material-ui\/core\";\r\n\r\nconst useStyles = makeStyles((theme) =&gt; ({\r\n\r\n\u00a0\u00a0root: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0color: \"red\"\r\n\r\n\u00a0\u00a0}\r\n\r\n}));\r\n\r\nreturn(\r\n\r\n&lt;h1 className={classes.root}&gt;Material-UI&lt;\/h1&gt;\r\n\r\n)<\/pre>\n<p><span style=\"font-weight: 400;\">Providing CSS to material UI components is so simple, you&#8217;ll surely going to like it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Material-UI is one of the best UI design libraries for reacting because react and material-UI both works on props, and the developer who is familiar with state and props will easily grasp the functioning of material-UI components.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>INTRODUCTION Here we will discuss material-UI\u00a0 What is it?\u00a0 Why are people using it and how do we set it up in our next react application? So if you didn&#8217;t hear of it before, then it\u2019s time to learn some of its major applications. We will create some buttons, headers, and other useful components and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257,642],"tags":[679,680,678,677],"class_list":["post-6877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-ui-design","tag-material-design","tag-material-ui-in-react","tag-material-ui","tag-usage-material-ui"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is Material-UI? - InnovationM - Blog<\/title>\n<meta name=\"description\" content=\"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Material-UI? - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-16T04:27:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-16T07:29:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"What is Material-UI?\",\"datePublished\":\"2021-07-16T04:27:10+00:00\",\"dateModified\":\"2021-07-16T07:29:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/\"},\"wordCount\":919,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Material-UI-Blog.png\",\"keywords\":[\"Material Design\",\"Material UI in React\",\"Material-UI\",\"Usage - Material-UI\"],\"articleSection\":[\"React\",\"UI Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/\",\"name\":\"What is Material-UI? - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Material-UI-Blog.png\",\"datePublished\":\"2021-07-16T04:27:10+00:00\",\"dateModified\":\"2021-07-16T07:29:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Material-UI-Blog.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Material-UI-Blog.png\",\"width\":1200,\"height\":628,\"caption\":\"Material UI - Blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/what-is-material-ui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Material-UI?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Material-UI? - InnovationM - Blog","description":"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/","og_locale":"en_US","og_type":"article","og_title":"What is Material-UI? - InnovationM - Blog","og_description":"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media","og_url":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-07-16T04:27:10+00:00","article_modified_time":"2021-07-16T07:29:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"What is Material-UI?","datePublished":"2021-07-16T04:27:10+00:00","dateModified":"2021-07-16T07:29:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/"},"wordCount":919,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png","keywords":["Material Design","Material UI in React","Material-UI","Usage - Material-UI"],"articleSection":["React","UI Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/","url":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/","name":"What is Material-UI? - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png","datePublished":"2021-07-16T04:27:10+00:00","dateModified":"2021-07-16T07:29:18+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"Material-UI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/07\/Material-UI-Blog.png","width":1200,"height":628,"caption":"Material UI - Blog"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/what-is-material-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is Material-UI?"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6877"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6884"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}