MUI
MaterialUI Frontend News

How to Include MUI with React.js and TypeScript: A Step-by-Step Guide

Boris Civcic

Material-UI (MUI) is a popular React component library that implements Google’s Material Design. Combining MUI with React.js and TypeScript provides a robust and type-safe way to build beautiful and interactive user interfaces. In this guide, we’ll walk you through the process of setting up and using MUI with React.js and TypeScript.

Step 1: Setting Up Your React Project

First, let’s set up a new React project with TypeScript using Create React App. If you already have a project, you can skip this step.

npx create-react-app my-mui-project --template typescript
cd my-mui-project

Step 2: Installing MUI

Next, we’ll install Material-UI (MUI) and its peer dependencies.

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

Additionally, if you want to use MUI icons, install the icons package:

npm install @mui/icons-material

Step 3: Setting Up the Project

With MUI installed, let’s set up our project to use MUI components. Open your src/index.tsx file and wrap your application in the MUI ThemeProvider.

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 4: Using MUI Components

Now, let’s create a simple component using MUI to ensure everything is set up correctly. Create a new file src/components/MyComponent.tsx.

// src/components/MyComponent.tsx

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

const MyComponent: React.FC = () => {
  return (
    <Container>
      <Typography variant="h4" gutterBottom>
        Welcome to My MUI App
      </Typography>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </Container>
  );
};

export default MyComponent;

Then, import and use this component in your App.tsx file.

// src/App.tsx

import React from 'react';
import MyComponent from './components/MyComponent';

const App: React.FC = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

Step 5: Customizing the MUI Theme

Customizing the MUI theme allows you to create a consistent design across your application. Modify the theme object in src/index.tsx to customize the default theme.

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    h4: {
      fontWeight: 'bold',
    },
  },
});

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 6: Using TypeScript with MUI

Using TypeScript with MUI enhances type safety and IntelliSense in your project. MUI components come with built-in TypeScript support, providing type definitions for props and themes.

Here’s an example of how you can define types for your component props:

// src/components/TypedComponent.tsx

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

interface Props {
  title: string;
  onButtonClick: () => void;
}

const TypedComponent: React.FC<Props> = ({ title, onButtonClick }) => {
  return (
    <Container>
      <Typography variant="h4" gutterBottom>
        {title}
      </Typography>
      <Button variant="contained" color="primary" onClick={onButtonClick}>
        Click Me
      </Button>
    </Container>
  );
};

export default TypedComponent;

Step 7: Integrating MUI Icons

MUI provides a rich set of icons that can be easily integrated into your project. Here’s how to use MUI icons in your components:

// src/components/IconComponent.tsx

import React from 'react';
import { IconButton } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

const IconComponent: React.FC = () => {
  return (
    <IconButton color="primary" aria-label="menu">
      <MenuIcon />
    </IconButton>
  );
};

export default IconComponent;

Conclusion

Including MUI with React.js and TypeScript enhances your development workflow by providing a rich set of UI components and type safety. By following this step-by-step guide, you can set up, customize, and use MUI in your React TypeScript projects effectively. Experiment with different components and themes to create beautiful, responsive applications.

Additional Resources

By following this comprehensive guide on how to include MUI with React.js and TypeScript, you will be well-equipped to build sophisticated and type-safe user interfaces. Happy coding!