# Material UI and styled components ###### tags: student-project, tech-spike --- ## Introduction * Developed by Google * Implements Google's Material Design principles, but for React components ### How exactly does Material UI work? * Material-UI components work in isolation. * So import components as and when you need them * They are self-supporting, and will only inject the styles they need to display. --- ### Creating a Material UI component ```javascript= import React from 'react'; import ReactDOM from 'react-dom'; import Button from '@material-ui/core/Button'; function App() { return ( <Button variant="contained" color="primary"> Hello World </Button> ); } ReactDOM.render(<App />, document.querySelector('#app')); ``` --- ### Will render the following component  --- ## Installation and set-up * Can be installed with npm or yarn ```javascript= // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core ``` * Recommends that you use the Roboto font, and this needs to be installed separately. ``` npm install typeface-roboto --save ``` --- ## What are some other benefits? * Allows you to build themes relatively quickly with ```@material-ui/system``` * ⚛️ Access the theme values directly from the component props. * 🦋 Encourage UI consistency. * 🌈 Write responsive style effortlessly. * 💅 Work with the most popular CSS-in-JS solutions. * 📦 Less than 4 KB gzipped. * Has ready-made templates we can use for sign-up and login * You can also overrride the default styling of Material UI --- ## Styled components * These are React components that have CSS rules built within them * They contain their own styles, so components are reusable across projects * Tagged template literals ### Installation ```javascript= npm install --save styled-components ``` --- ## Example ```javascript= // Create a Title component that'll render an <h1> tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; ``` ```javascript= // Create a Wrapper component that'll render a <section> tag with some styles const Wrapper = styled.section` padding: 4em; background: papayawhip; `; ``` ---  --- ## Further reading ### Material UI [Elegant UX in React with Material-UI](https://alligator.io/react/material-ui/) [Material UI Quick start](https://material-ui.com/getting-started/usage/#quick-start) [React + Material UI video series](https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr) ### Styled components [8 reasons to use styled components](https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/) [VS code styled components extension](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) [Styled Components documentation](https://styled-components.com/) [Testing styled components in Jest](https://github.com/styled-components/jest-styled-components) [Egghead video introduction to styled components](https://egghead.io/playlists/styled-components-4169206d) **good for if you're short on time** [Styled components Medium page](https://medium.com/styled-components)