Custom Styling works on local but not on Vercel

Question

Hey guys I spent hours trying to get this to work. Interestingly, the code below, which is designed to add custom styles to my MUI NextJS app with router v14, functions perfectly in a local development environment (whether compiled or not). However, when it comes to deployment in production, specifically Vercel, only the fonts seem to work.

import { Inter } from "next/font/google";
import { Toaster, toast } from "sonner";
import { UserProvider } from "@auth0/nextjs-auth0/client";
import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import { SpeedInsights } from "@vercel/speed-insights/next"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { theme } from "./theme";

import "./components/fonts.css";

const inter = Inter({ subsets: ["latin"] });


const RootLayout = ({ children }) => {

  return (
    <>
      <html lang="en">
        <head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap"
          />
        </head>
        <Toaster richColors />
        <UserProvider>
          <AppRouterCacheProvider>
            <ThemeProvider theme={theme}>
              <body className={inter.className}>
                <CssBaseline />
                {children}
                <SpeedInsights />
              </body>
            </ThemeProvider>
          </AppRouterCacheProvider>
        </UserProvider>
      </html>
    </>
  );
};

export default RootLayout;

"use client";

import "./components/fonts.css";
import { createTheme } from "@mui/material/styles";


const theme = createTheme({
  palette: {
    primary: {
      main: "#333333",
    },
    secondary: {
      main: "#7A1F26",
    },
    background: {
      default: "#F5F7FA",
    },
  },
  typography: {
    fontFamily: `Ropa Sans, Spy Agency, sans-serif`,
  },
});

export { theme };

Custom Styling works on local but not on Vercel

0 Replies