Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – theme not applying for my component in next.js application

I am doing an app in next.js. The landing page of the app is in LandingContent.tsx and the theme is not applying for this component but rest of the content inside.

I applied theme for every basic thing like h1,h2,h3,etc , buttons , links. I globally wrapped it and expected the theme to apply everywhere. But, it is not applying for landing content alone.

  return (
    <html lang="en">
      <body>
        <ThemeProvider theme={theme}>
          <StyledEngineProvider injectFirst>
            <Providers>
              <AppInsightProvider>
                <GlobalProvider>{children}</GlobalProvider>
              </AppInsightProvider>
            </Providers>
          </StyledEngineProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

I’m working on a React project using Material-UI, and I want to customize the Link component styles globally using the Theme configuration. Here’s what I have so far:

'use client';
import { createTheme } from '@mui/material/styles';
import { createBreakpoints } from '@mui/system';

const breakpoints = createBreakpoints({});

const theme = createTheme({
  components: {
    // Link
    MuiLink: {
      styleOverrides: {
        root: {
          color: '#f05742',
          fontSize: '12px',
          textDecorationColor: '#f05742',
          cursor: 'pointer',
          [breakpoints.down('sm')]: {
            fontSize: '11px',
          },
        },
      },
    },
  },
});

export default theme;

I’m using Material-UI’s Link component to create a link that opens in a new tab. Here’s the code snippet:

<Link href={feature.link} target="_blank">
   Know More
</Link>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I applied the theme in layout.tsx it did not work. I changed wrapped it in page.tsx and it works. Thanks for viewing my question.


  2. 0

    For using MUI in next make sure :

    1. Read This Article Integration With Next

    2. CacheProvider is not only for caching , make sure you set cache provider , of course the next version of that

    3. Is better to manage theme in a component , define theme and provide in a client component then wrap other components into it in layout

    4. Make sure install and config the required dependencies for Next.js :

      npm install @mui/material-nextjs @emotion/cache

    5. You should consider, according to this article Support the Next.js MUI is not supporting server components yet , and may you have some problem with using MUI in a Next.js app

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search