如何在TypeScript编写的React应用中使用Material UI？找不到其@types模块该如何解决？

Hey there! Let's tackle your two questions about using Material UI (MUI) with TypeScript in React—this is a super common setup, so I'll walk you through everything step by step.

First: The @types Module Confusion #

Good news: You don't need separate @types packages for Material UI anymore! Starting with MUI v5, the library includes official TypeScript type definitions out of the box. If you tried installing old @types/material-ui packages, they might actually cause conflicts with the built-in types.

• If you have an old @types package installed, uninstall it first:

  npm uninstall @types/material-ui
  # or for yarn
  yarn remove @types/material-ui
  

• Install the latest MUI core dependencies (v5):

  npm install @mui/material @emotion/react @emotion/styled
  # or
  yarn add @mui/material @emotion/react @emotion/styled
  

(Note: If you're stuck on MUI v4 for some reason, you will need @types/material-ui—but v4 is no longer maintained, so upgrading to v5 is highly recommended.)

Second: Correctly Using MUI in TypeScript React #

Let's cover the basics and some key TypeScript-specific use cases:

1. Basic Component Usage #

MUI components come with full TypeScript support, so you'll get auto-completion and type checking for all props right out of the box. Here's a simple Button example:

import React from 'react';
import Button from '@mui/material/Button';

const App = () => {
  const handleClick = () => console.log('Button clicked!');

  return (
    <div style={{ padding: '2rem' }}>
      <Button variant="contained" color="primary" onClick={handleClick}>
        Hello MUI + TypeScript
      </Button>
    </div>
  );
};

export default App;

Try passing an invalid variant value (like foo)—TypeScript will throw an error immediately, which helps catch bugs early.

2. Custom Themes with Type Safety #

If you want to extend the MUI theme (add custom colors, typography, etc.), you can extend MUI's TypeScript interfaces to keep everything type-safe:

import React from 'react';
import { createTheme, ThemeProvider, Button } from '@mui/material';

// Extend MUI's palette types to include our custom color
declare module '@mui/material/styles' {
  interface Palette {
    brand: {
      main: string;
      light: string;
    };
  }
  interface PaletteOptions {
    brand?: {
      main: string;
      light: string;
    };
  }
}

const theme = createTheme({
  palette: {
    brand: {
      main: '#2196f3',
      light: '#64b5f6',
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="brand">
        Brand Button
      </Button>
    </ThemeProvider>
  );
};

export default App;

Now your custom brand color will show up in auto-completion and be validated by TypeScript.

3. Building Reusable Components with MUI Props #

When creating your own components that wrap MUI components, you can inherit MUI's prop types to maintain type safety:

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

// Add a custom prop while keeping all MUI Button props
interface CustomButtonProps extends ButtonProps {
  buttonLabel: string;
}

const CustomButton = ({ buttonLabel, ...props }: CustomButtonProps) => {
  return <Button {...props}>{buttonLabel}</Button>;
};

// Usage: TypeScript will enforce both MUI props and our custom buttonLabel
const Example = () => <CustomButton buttonLabel="Click Me" variant="outlined" />;

Quick Troubleshooting Tips #

• If you see type errors, double-check your MUI version (must be v5+ for built-in types) and TypeScript version (MUI v5 requires TS 4.1 or higher).
• Make sure you're importing components from @mui/material (not the old @material-ui/core package—v5 changed the package names!).

内容的提问来源于stack exchange，提问作者Vikrant Banwal