DEV Community

artemismars
artemismars

Posted on

Material UI - Install

Material UI (MUI) Install

Basic libraries

@emotion/styled
@emotion/react

@mui/material
Enter fullscreen mode Exit fullscreen mode

I needed 3 libraries to use material UI.
@mul/material includes bunch of MUI components.
emotion supports customized React components and MUI uses emotions components.

That's why I needed to install emotion libraries to use MUI components.

How to import components from MUI then?

import {Typography} from '@mui/material'
Enter fullscreen mode Exit fullscreen mode

There's one more thing.
MUI icons
To use Icons, I needed to install this library.

@mui/icons-material
Enter fullscreen mode Exit fullscreen mode

How to import icons from the library

import {SendIcon} from '@mui/icons-material'
Enter fullscreen mode Exit fullscreen mode
import SendIcon from '@mui/icons-material/Send'
Enter fullscreen mode Exit fullscreen mode

Check the full list of MUI icons here!
https://mui.com/components/material-icons/

Check the list of MUI components here!
https://mui.com/material-ui/getting-started/supported-components/#main-content

A code example

import {Button} from '@mui/material'
import SendIcon from '@mui/icons-material/Send'

export default function App() {
  return (
    <Button 
      startIcon={<SendIcon/>
    }>
      Button
    </Button>
  )
}
Enter fullscreen mode Exit fullscreen mode

Output:
Image description

Top comments (0)