Should make my life easier, this is the most popular library of its kind in 2021.
Practice incorporating into a few projects.
Adrian Twarogs video here.
“appBars” are site headers with hamburger-a-menu-icon.
Can use in combo with any CSS methodology per this “interoperability” article here.
Link to video here
Building a consistent design can be time-consuming and irritating. You can instead build new features for your business or app.
Uses CRA and really doesn’t start until 7 minutes. I like how he deletes entire src folder and creates the two needed files, (App.jsx and index.js).
Need to install the two packages (@material-ui/core and @material-ui/icons) and load the default Roboto font via cdn link on material-ui.com.
Import {typography} from core and set the variant prop.
There are full templates, and he built out the “album” template from scratch instead of just copying/pasting from github. You can see the templates at material-ui.com/getting-started/templates/
Imported a laundry list in one set of curly brackets from core, {Typography, AppBar, Card, CardActions, CardContent, CardMedia, CssBaseline, Grid, Toolbar, Container}.
Also import {PhotoCamera} from ‘@material-ui/icons’ and to see all the icons go to material-ui.com/components/material-icons
At 15-minute mark he used CssBaseline to start building out the main “App.jsx” component AppBar with Toolbar inside. Under that he adds an AppBar with a Toolbar inside of that.
Container with “maxWidth” prop equal to sm
Typography h2
Typography h5
Know the props available to use with the components by looking at material-ui.com website and look under Components (examples, demos, explanations) and Components API (complete list of props and css rules and classes but no examples)
Great styles out of the box, and responsive, but can also customize in many ways. One way is with inline styles (double curly bracket) but this is not ideal because it can get messy quick.
Another way is to use the material UI recommended way by importing makeStyles from core/styles
30m: below the imports but above the component create a hook const useStyles set equal to makeStyles() and inside the parentheses you pass a callback arrow function which takes in theme and returns an object which contains all of your custom styles. The syntax can be a bit confusing so re-watch as necessary.
Now go inside of your component and have a constant named classes set equal to useStyles()
In your JSX have a className set equal to {classes.whatEvs}
Back in the makeStyles function block have whatEvs: {} and put your CSS properties in the curly brackets.
Note that whatEvs does not have a leading period like a typical class. And properties are separated with commas and not semicolons. Also, all of your property values need to be wrapped in quotes to be a string.
Material UI has a built in background color. Theme.pallete.background.paper
You can also create a new file for the styles so it doesn’t crowd your component file. Import makeStyles and export default useStyles. In your component import useStyles from path.
Author said he hated syntax but then he got used to it.
Author used marginTop because you cannot use standard CSS properties, you must camelcCase everything and drop hyphen.
If using CardMedia component with an image prop you have to give it a height to have it show up.
PaddingTop 56.25% to keep aspect ratio which we are used to seeing (16:9).
Map over items by first creating array of different cards above the component function and then inside the grid container loop over the cards inside a JSX logic block {}. Have an instant return by using a parentheses instead of a curly braces in your callback function.
There are responsive properties on the grid item. Set xs to 12 to take up full width on small devices.