Next.js Discord

Discord Forum

Localhost Styles working but Vercel Deployed Ignores?

Unanswered
Elegant Trogon posted this in #help-forum
Open in Discord
Avatar
Elegant TrogonOP
Hello, for some reason when I work locally my custom styles (code below) in my NextJS(Latest version -- App Router) project work fine. But when I push to production in Vercel, my colors are ignored, but the fonts are working. What can be causing this?

"use client";
// import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Toaster, toast } from "sonner";
import { UserProvider } from "@auth0/nextjs-auth0/client";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import "./components/fonts.css"; // Import the CSS file with font-face rule

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

// export const metadata: Metadata = {
//   title: process.env.NEXT_PUBLIC_TITLE || "",
//   description: process.env.NEXT_PUBLIC_DESCRIPTION || "",
// };

const getDesignTokens = () => {
  return {
    palette: {
      mode: "light",
      primary: {
        main: "#333333",
      },
      secondary: {
        main: "#7A1F26",
      },
      background: {
        default: "#F5F7FA",
      },
    },
    typography: {
      fontFamily: `Roboto, Spy Agency, sans-serif`,
    },
  };
};

const RootLayout = ({ children }) => {
  const theme = createTheme(getDesignTokens());

  return (
    <>
      <html lang="en">
        <head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
          />
        </head>
        <Toaster richColors />
        <UserProvider>
          <ThemeProvider theme={theme}>
            <CssBaseline>
              <body className={inter.className}>{children}</body>
            </CssBaseline>
          </ThemeProvider>
        </UserProvider>
      </html>
    </>
  );
};

export default RootLayout;

17 Replies

Avatar
Elegant TrogonOP
Bump?
Avatar
<Milind ツ />
Tbh you should not make your root layout as a client component. Make all the client related stuff to separate component as baseprovider or global provider then then import it in root layout under body.
Also, doesn't mui give any doc on how to setup for nextjs?
Avatar
gin
for material ui you dont need it to be a client component
maybe look at the documentation?
there should be a tutorial for the app router
https://mui.com/material-ui/integrations/nextjs/
this should help you
@Elegant Trogon
Avatar
Clown
Dont think that matters much at all tbh
Avatar
Elegant TrogonOP
We tried following this and no luck
I removed the "use client" and made the theme a different file and just imported it
New code: 

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 };
Avatar
Elegant TrogonOP
Bump?
Avatar
<Milind ツ />
i just noticed in your code, you have put body tag after provider. move the body tag above all providers.
html > body > any providers
also u can import the ropa sans font directly from next/font/google instead of using declaring it in head tag