docs/src/pages/en/(pages)/integrations/mui.mdxmdx4.3 KiB1d98c6a6

title: Material UI category: Integrations order: 6

import Link from "../../../../components/Link.jsx";

Material UI

@lazarv/react-server is compatible with Material UI (MUI), a popular React component library implementing Google's Material Design. MUI uses Emotion for CSS-in-JS styling, which works out of the box with @lazarv/react-server.

<Link name="installation"> ## Installation </Link>

Install Material UI and its required dependencies:

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

Optionally, install the Roboto font and Material Icons:

pnpm add @fontsource/roboto @mui/icons-material

<Link name="theme-setup"> ## Theme setup </Link>

Create a theme file to configure your Material UI theme:

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    mode: "light",
  },
  typography: {
    fontFamily: "Roboto",
  },
});

export default theme;

<Link name="provider-setup"> ## Provider setup </Link>

Material UI requires a ThemeProvider and CssBaseline for proper theming and baseline styles. Create a client component that wraps your app:

"use client";

import Container from "@mui/material/Container";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";

import theme from "../theme";

export default function Layout({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="lg">
        {children}
      </Container>
    </ThemeProvider>
  );
}

Then set up your root layout to import the font and use the Layout provider component:

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import Layout from "./components/Layout";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My App</title>
      </head>
      <body suppressHydrationWarning>
        <Layout>{children}</Layout>
      </body>
    </html>
  );
}

<Link name="navigation"> ## Navigation </Link>

To use MUI link and button components with @lazarv/react-server's client-side navigation, pass the runtime's Link component via the component prop:

"use client";

import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Link from "@mui/material/Link";

export default function Home() {
  return (
    <Link to="/about" color="secondary" component={ReactServerLink}>
      Go to the about page
    </Link>
  );
}

The same pattern works with MUI Button for navigation:

"use client";

import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Button from "@mui/material/Button";

export default function About() {
  return (
    <Button to="/" component={ReactServerLink}>
      Go to the home page
    </Button>
  );
}

<Link name="server-components"> ## Server components </Link>

Some MUI components that don't rely on browser APIs or React hooks can be used directly in server components. Components like Typography and Link (without navigation) work in server components:

import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";

export default function Copyright() {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}.
    </Typography>
  );
}

<Link name="icons"> ## Icons </Link>

When using @mui/icons-material, import icons from the ESM path for proper module resolution:

import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";

Check out the Material UI example to see a complete example of using MUI with @lazarv/react-server.