-
Notifications
You must be signed in to change notification settings - Fork 202
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added introduction to material UI materialui.md (#482)
- Loading branch information
Showing
1 changed file
with
53 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
# Material UI Guide | ||
|
||
## Introduction | ||
|
||
Material UI (MUI) is the most popular UI framework for React. | ||
|
||
It is an open-source library containing a large amount of components that can be seamlessly integrated into React applications to create a customizable user experience. MUI components are responsive, allowing for consistency across different screen sizes and platforms. | ||
|
||
## Installation | ||
|
||
Since MUI is a framework for React, ensure that dependencies `react` and `react-dom` are installed. They can be installed with `npm install react` and `npm install react-dom` respectively. | ||
|
||
To install MUI using npm, run the console command `npm install @mui/material @emotion/react @emotion/styled` | ||
|
||
To install with yarn, run `yarn add @mui/material @emotion/react @emotion/styled` | ||
|
||
## Importing Components | ||
|
||
Material UI components can be imported individually. For example, a `Button` component can be added to a .jsx file with the following: | ||
|
||
```js | ||
import Button from '@mui/material/Button'; | ||
``` | ||
|
||
Multiple components can be imported like this: | ||
|
||
```js | ||
import { | ||
Box, | ||
Button, | ||
Grid, | ||
} from '@mui/material'; | ||
``` | ||
|
||
## Adding Components | ||
|
||
MUI components are utilized in a similar way to HTML in React JSX, with its own unique tags. MUI components are diffentiated from HTML with their capitalized tag names. Some components have variants that affect their styling. | ||
|
||
```js | ||
export default function ButtonUsage() { | ||
return <Button variant="contained">Hello world</Button>; | ||
} | ||
``` | ||
|
||
## Mobile Rendering | ||
|
||
Material UI components are primarily developed for mobile devices, which are then scaled up for larger viewports. It is highly recommended to add the viewport meta tag, which ensures proper rendering and touch zooming for all devices. | ||
|
||
`<meta name="viewport" content="initial-scale=1, width=device-width" />` | ||
|
||
## Manual | ||
|
||
For a detailed introductory guide to Material UI with usage examples, visit https://mui.com/material-ui/getting-started/ |