Welcome to the world of Material-UI, a popular React UI framework for building stunning web applications. Whether you’re a seasoned developer or just starting your journey in web development, Material-UI offers a powerful set of components and tools to create beautiful, responsive interfaces.
In this guide, we’ll explore the basics of Material-UI, from installation to building your first components. Let’s dive in and discover how Material-UI can streamline your development process and elevate the look and feel of your projects.
Table of Contents
1. Installation
You can install Material-UI and its peer dependencies using npm or yarn.
Using npm
npm install @mui/material @emotion/react @emotion/styled
Using yarn
yarn add @mui/material @emotion/react @emotion/styled
2. Basic Usage
After installing Material-UI, you can start using its components in your React application.
Importing Components
You can import individual components or the entire library:
import { Button, Typography } from '@mui/material';
Using Components
Use the imported components in your React components:
function App() {
return (
<div>
<Typography variant="h1" component="h1">
Hello, Material-UI!
</Typography>
<Button variant="contained" color="primary">
Click Me
</Button>
</div>
);
}
3. Creating a Simple Web Page
Let’s create a basic web page using Material-UI components.
3.1 Create App.js
Create a new file App.js
in your src
directory with the following content:
import { Button, Typography } from '@mui/material';
function App() {
return (
<div style={{ padding: '20px' }}>
<Typography variant="h1" component="h1" gutterBottom>
Welcome to Material-UI
</Typography>
<Typography variant="body1" component="p" gutterBottom>
This is a simple example demonstrating Material-UI components.
</Typography>
<Button variant="contained" color="primary">
Get Started
</Button>
</div>
);
}
export default App;
3.2 Update index.js
Update src/index.js
to render the App
component:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
4. Styling with Material-UI
Material-UI provides a flexible and powerful styling solution with its makeStyles
and styled
utilities.
Using makeStyles
You can create custom styles for components using makeStyles
:
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
root: {
padding: theme.spacing(2),
backgroundColor: theme.palette.background.default,
},
}));
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Typography variant="h1" component="h1" gutterBottom>
Welcome to Material-UI
</Typography>
<Typography variant="body1" component="p" gutterBottom>
This is a simple example demonstrating Material-UI components.
</Typography>
<Button variant="contained" color="primary">
Get Started
</Button>
</div>
);
}
Using styled
You can also create custom styled components using styled
:
import { styled } from '@mui/material/styles';
const CustomButton = styled(Button)({
backgroundColor: 'green',
color: 'white',
'&:hover': {
backgroundColor: 'darkgreen',
},
});
function App() {
return (
<div style={{ padding: '20px' }}>
<Typography variant="h1" component="h1" gutterBottom>
Welcome to Material-UI
</Typography>
<Typography variant="body1" component="p" gutterBottom>
This is a simple example demonstrating Material-UI components.
</Typography>
<CustomButton variant="contained">
Get Started
</CustomButton>
</div>
);
}
5. Conclusion
Congratulations! You’ve set up Material-UI in your React project and created a simple web page with Material-UI components. Material-UI provides a rich set of components following the Material Design guidelines, making it easy to create beautiful and responsive user interfaces. In this tutorial, we covered the installation, basic usage, creating a web page, and styling with Material-UI. Explore further by diving into Material-UI’s documentation to discover more components, themes, and customization options for your projects.