Setup
Create your react application project folders and files: |
npx create-react-app <project_name>
|
Navigate into your newly created project folder |
|
Launch VS Code (or preferred IDE) using code .
and press Enter |
In your terminal window, install the Material UI package: |
npm install @material-ui/core
|
Add Fonts & Icons
Material UI defines Roboto as the default font. Edit index.html and add the following statement inside your <head> block: |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
Modify the global style sheet index.css and place Roboto in the first position (see below) |
body { ... font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', ... }
|
Add a link for the FONT Icons. Place it just below the 'Roboto' link |
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
Install SVG icons: |
npm install @material-ui/icons
|
Default Styles and use of the App component.
Since Material-UI provides a default theme of baseline components, styles, colors, and typography, we will not need the definitions found in the App.css created during the initial setup.
Edit the App.css file and clear its contents.
---
By convention for React development, your App component should be placed under the .src directory.
1) Create a folder named 'App' in your src director
2) Next move your 'App.*' files into this directory.
3) Modify the import statement in your index.js file to correctly find your App.js file.
(ex. import App from './App/App';
) |
Baseline Component Wrappers
Material UI promotes the functional component design. Although it also support classed based component design. The implementation is 'different' and can be confusing if you are just getting started.
An easy way to handle this is to create wrappers for all of the baseline components that implement the function component design. This way you can use your wrapper based components consistently no matter which component design method you want to use.
1) Create a subfolder named "components" in your src directory.
2) Inside this new folder, create another folder named 'controls'.
3) Inside your controls folder, you will create a JS/JSX fille for every baseline component that you wish to use (ex: 'button', 'input', 'select', 'datepicker', etc.).
4) Also, to make importing these items easier and to keep your code 'clean', create a controls.js.file. |
Sample Button wrapper
import React from 'react'
import { Button as MuiButton, makeStyles } from '@material-ui/core'
const useStyles = makeStyles((theme) => ({
root: {
margin: theme.spacing(0.5)
},
label: {
textTransform: "none"
}
}))
const Input= (props) => {
const { text, size, color, variant, onClick, ...other} = props
const classes = useStyles();
return (
<MuiButton
variant={variant || "contained"}
size={size || "small"}
color={color || "primary"}
onClick={onClick}
{...other}
classes={{ root:classes.root, label:classes.label }}
>
{text}
</MuiButton>
)
}
export default Input
---
Example use of this component
<Controls.Button
text="Cancel"
onClick={handleCancel}
/>
|
This example demonstrates how to "wrap" around the baseline button component. It provides "default" variant, size and color properties. The only props that you need to supply will be the text and the click handler.
Note: the ...other
parameter will allow to make use of ALL available properties.
Note: In order to prevent naming colisions, the 'Button' import from Material UI was given an alias of 'MuiButton'. Thus we can now call our wrapped component 'Button'.
Control.JS File
import Button from './Button'
import Input from './Input'
import Select from './Select'
const Controls = {
Button,
Input,
Select
}
export default Controls;
---
Now in your other components, simply import everything using the following:
import Controls from '../../components/controls/Controls';
|
This file will make importing your wrapped baseline components easier and will help to keep your code 'clean'.
For each component in your controls folder, add an import statement and the component name in the const definition.
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by CashM