The Ultimate Cheat Sheet on Material UI with React

Getting Started

To begin using Material UI in your React project, you first need to install it via npm or yarn:

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

or

yarn add @mui/material @emotion/react @emotion/styled

Once installed, you can import the components you need into your React components.

import { Button, Typography, TextField } from '@mui/material';

Basic Components

Buttons

Buttons are fundamental UI elements for user interaction. Material UI offers a variety of button styles and configurations.

<Button variant="contained" color="primary">
  Primary Button
</Button>

Typography

Typography components help in styling text with different variants and styles.

<Typography variant="h1" color="primary">
  Heading 1
</Typography>

Text Fields

Text fields allow users to input data and are customizable to suit various use cases.

<TextField label="Username" variant="outlined" />

Layout

Material UI provides layout components to structure your application effectively.

Grid

The Grid component facilitates responsive layout design with easy-to-use grid systems.

<Grid container spacing={3}>
  <Grid item xs={12} md={6}>
    {/* Content */}
  </Grid>
  <Grid item xs={12} md={6}>
    {/* Content */}
  </Grid>
</Grid>

AppBar

The AppBar component creates a top app bar for navigation and page titles.

<AppBar position="static">
  <Toolbar>
    <Typography variant="h6">
      My App
    </Typography>
  </Toolbar>
</AppBar>

Styling

Material UI offers various approaches to style components, including CSS-in-JS with Emotion or using built-in styling solutions.

CSS-in-JS with Emotion

import { styled } from '@mui/material/styles';

const StyledButton = styled(Button)({
  backgroundColor: 'blue',
  color: 'white',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
});

Overriding Styles

You can override default styles using sx prop or makeStyles hook.

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: 'blue',
    color: 'white',
    '&:hover': {
      backgroundColor: 'darkblue',
    },
  },
}));

function MyComponent() {
  const classes = useStyles();

  return (
    <Button className={classes.button}>
      Styled Button
    </Button>
  );
}

Themes

Themes in Material UI allow you to customize the look and feel of your application consistently.

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

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

function MyApp() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your App Components */}
    </ThemeProvider>
  );
}

Conclusion

Material UI simplifies the process of building beautiful and responsive user interfaces in React applications. By utilizing its components, layout systems, styling options, and theming capabilities, developers can create visually stunning web applications with ease. Experiment with the examples provided in this cheat sheet and unleash the full potential of Material UI in your projects.

Happy coding!