How do you integrate UI component libraries with React and when should you use them?

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Button, TextField, Card, CardContent, CssBaseline } from '@mui/material';

// Create custom theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
    mode: 'light', // or 'dark'
  },
  typography: {
    fontFamily: 'Inter, Arial, sans-serif',
    h1: {
      fontSize: '2.5rem',
    },
  },
  // Component overrides
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline /> {/* Normalize CSS */}
      <Card sx={{ maxWidth: 400, m: 2 }}>
        <CardContent>
          <TextField 
            label="Email" 
            variant="outlined" 
            fullWidth 
            margin="normal"
          />
          <Button variant="contained" color="primary" fullWidth>
            Sign Up
          </Button>
        </CardContent>
      </Card>
    </ThemeProvider>
  );
}