Material UI Cheat Sheet

Material-UI is a popular React UI framework that follows the principles of Google’s Material Design. Here’s a cheat sheet for Material-UI:

Installation

npm install @mui/material @emotion/react @emotion/styled

Basic Usage

import React from 'react';
import { Button, Typography, Paper } from '@mui/material';

const MyComponent = () => {
  return (
    <Paper>
      <Typography variant="h1">Hello, Material-UI!</Typography>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </Paper>
  );
};

Typography

• <Typography variant="h1">Heading 1</Typography>
• <Typography variant="body1">Body Text</Typography>

Buttons

• <Button variant="contained" color="primary">Primary</Button>
• <Button variant="outlined" color="secondary">Secondary</Button>
• <Button variant="text">Text Button</Button>

Icons

import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

const MyIcon = () => {
  return <AccessAlarmIcon />;
};

Forms

• <TextField label="Username" variant="outlined" />
• <Checkbox />, <Radio />, <Switch />

Layout

• <Container>, <Grid>, <Box>
• Responsive design with breakpoints: <Hidden smDown>Content</Hidden>

Themes

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
    secondary: {
      main: '#ff4081',
    },
  },
});

const ThemedApp = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app components */}
    </ThemeProvider>
  );
};

Snackbars

import { Snackbar, Alert } from '@mui/material';

const MySnackbar = () => {
  return (
    <Snackbar open={true} autoHideDuration={6000}>
      <Alert severity="success" onClose={() => {}}>
        This is a success message!
      </Alert>
    </Snackbar>
  );
};

Dialogs

import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';

const MyDialog = () => {
  return (
    <Dialog open={true} onClose={() => {}}>
      <DialogTitle>Title</DialogTitle>
      <DialogContent>Dialog Content</DialogContent>
      <DialogActions>
        <Button onClick={() => {}}>Cancel</Button>
        <Button onClick={() => {}}>OK</Button>
      </DialogActions>
    </Dialog>
  );
};

This cheat sheet covers some common components and patterns in Material-UI. For more detailed information and customization options, refer to the Material-UI documentation.