DEV Community

OpenSourcee
OpenSourcee

Posted on

Styling Material-UI in your Next.js App

TLDR;

This guide provides a starting point for developers looking to style Material-UI components within a Next.js application, offering practical examples and directing readers to further resources within the WebCrumbs community.


Material-UI offers a robust set of components and styles for React applications. When paired with Next.js, it provides a seamless way to style your app while leveraging server-side rendering for a snappy user experience. Here's how to bring Material-UI's sleek design into your Next.js project.


Embrace the Theme

First things first, wrap your app with ThemeProvider from Material-UI. This allows you to customize the theme to fit your brand's aesthetic. Think of it as setting the stage for your components to shine.

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

const theme = createTheme({
  // Your theme options go here
});

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Component-Level Styling

Material-UI's components come with their own styling props like color and variant, but for more granular control, use the sx prop.

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

export default function Home() {
  return <Button sx={{ bgcolor: 'primary.main', '&:hover': { bgcolor: 'primary.dark' } }}>
    Click me
  </Button>;
}
Enter fullscreen mode Exit fullscreen mode

Global Styles

For global styles, such as body background or default margins, utilize the CssBaseline component from Material-UI at the root of your project.

import CssBaseline from '@mui/material/CssBaseline';
// ... other imports

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Responsiveness with Material-UI

Material-UI's built-in responsiveness features, like the useMediaQuery hook, allow your styles to adapt to different screen sizes.

import useMediaQuery from '@mui/material/useMediaQuery';

export default function ResponsiveComponent() {
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <div style={{ width: matches ? 200 : 100 }}>...</div>;
}
Enter fullscreen mode Exit fullscreen mode

Customizing Components

Sometimes, you need a component that looks different from the default. Create a new style with makeStyles or styled.

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

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  // ... other styles
});

export default function Home() {
  return <MyButton>Custom Button</MyButton>;
}
Enter fullscreen mode Exit fullscreen mode

Theming and Overrides

To universally adjust a component, tweak the theme's components section.

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '8px', // Round those edges
          // More overrides
        },
      },
    },
    // Other component overrides
  },
});

// ... ThemeProvider and MyApp remain the same
Enter fullscreen mode Exit fullscreen mode

With these techniques, you can ensure your Next.js app not only functions well but also looks the part.

Take a bow for mastering the art of styling Material-UI in Next.js. For more UI tips and community support, check out the resources below.

Continue your journey with WebCrumbs

Join the WebCrumbs community

Top comments (0)