The latest articles on DEV Community by Mohit Pujari (@braveprogrammer). https://dev.to/braveprogrammer https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F826854%2F6f13d88f-03b6-40de-9ac3-905f55677fa2.png https://dev.to/braveprogrammer en Mohit Pujari Tue, 08 Mar 2022 04:54:49 +0000 https://dev.to/braveprogrammer/material-ui-in-react-js-4560 https://dev.to/braveprogrammer/material-ui-in-react-js-4560 <h2> <code>1. What is Material UI?</code> </h2> <h2> Ans: Material UI is UI library for React JS. </h2> <h2> <code>2. Why and when should you use Material UI?</code> </h2> <h3> Ans: Material UI has almost everything you need in a web site UI such as NavBar,Cards etc. Also you can customize the UI components easily. Now Let's see when should we use Material UI. Material Ui can be used in React JS. And Material UI not only has UI Components but also Material UI has a Icons library. </h3> <h2> <code>Now let's understand how to use material Ui Components</code> </h2> <h3> Typography </h3> <p><code>Typography</code> is a Material UI Component for text. You can add varient prop in Typography and specify it to a heading or paragraph tag.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="p">&lt;</span><span class="nc">Typography</span> <span class="na">variant</span><span class="p">=</span><span class="s">"h1"</span><span class="p">&gt;</span> Hello World <span class="p">&lt;/</span><span class="nc">Typography</span><span class="p">&gt;</span> </code></pre> </div> <h3> Appbar </h3> <p>Appbar is a Material UI custom Component for creating nice mui Navbar<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="p">&lt;</span><span class="nc">Appbar</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nc">Typography</span><span class="p">&gt;</span>MyAppbar<span class="p">&lt;/</span><span class="nc">Typography</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nc">Appbar</span><span class="p">&gt;</span> </code></pre> </div> javascript react