- Spin up a new project:
- JavaScript:
npx create-react-app your-app-name
- Typescript:
npx create-react-app your-app-name --template typescript
- or whatever project bootstrap you like, as long as the end result is a React project
- docs
- JavaScript:
- Install Material UI
cd
intoyour-app-name
, and when there:npm i @mui/material
- if you want icons, which you probably do,
npm i @mui/material @mui/icons-material
- docs
- I had dependency problems when starting to use MUI components with just this package installed. Based on the errors, I also installed these two libraries that provide additional styling tools:
npm i @emotion/react @emotion/styled
- docs
- Optional: configure eslint
npx eslint --init
- follow the prompts
- docs
- I ran into some dependency issues when running the project after following the prompts. If this happens, follow the instructions npm provides in the terminal output, they're typically spot-on.
- NB: The Typescript linting this provides is extensive. It is much stricter than the Typescript compiler itself. I've found that having this very strict linting turned on is a great tool for learning how to work with types.
- Run the project!
npm run start
- If your project does not start up in your browser automatically, navigate manually to whatever
localhost
port it's set to.create-react-app
projects will go tolocalhost:3000
unless that's already in use.
Those are the only required steps! From here on we're coding in a playground.
I typically remove the unused logo assets in src
and public
after I start messing with App.tsx
. If you do that, you'll also want to remove references to them in public/manifest.json
.
You can get started using Material UI without doing any other setup, but there are some steps you should take to get the most out of it.
-
Add responsive meta tag
- in
public/index.html
, replace the existing viewport tag in the<head>
with<meta name="viewport" content="initial-scale=1, width=device-width" />
- this provides better rendering support across different-sized devices
- in
-
Add the CSS baseline component
- in
App.tsx
(or.jsx
or.js
), wrap the app in a fragment and add the baseline component:
// ... other imports import CssBaseline from '@mui/material/CssBaseline'; // ...start of component <> <CssBaseline /> {/* actual app stuff */} </>;
- your import may look a little different depending on context, but that's the gist
- this provides style normalizations throughout the app
- in
-
Add Roboto font - MUI is built with the Roboto font in mind, but it's not included by default; if you'd like to use it, add
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
to the<head>
inpublic/index.html
- docs