主题不适用于 next.js 应用程序中的我的组件

Question

我正在 next.js 中做一个应用程序。应用程序的登陆页面位于 LandingContent.tsx 中，主题不适用于该组件，而是适用于其中的其余内容。

我为每个基本的东西应用了主题，比如 h1、h2、h3 等、按钮、链接。我对它进行了全局包装，并希望该主题适用于所有地方。但是，它并不是单独申请登陆内容。

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

我正在使用 Material-UI 开发一个 React 项目，我想使用主题配置全局自定义链接组件样式。这是我到目前为止所拥有的：

'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;

我正在使用 Material-UI 的链接组件创建一个在新选项卡中打开的链接。这是代码片段：

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

Answer 1

要在接下来使用 MUI，请确保：

阅读本文与 Next 集成
CacheProvider 不仅仅用于缓存，请确保设置缓存提供程序，当然是下一个版本
最好在组件中管理主题，定义主题并在客户端组件中提供，然后在布局中将其他组件包装到其中
确保安装并配置 Next.js 所需的依赖项：

npm 安装@mui/material-nextjs @emotion/cache
根据本文，您应该考虑支持Next.jsMUI尚不支持服务器组件，并且您在Next.js应用程序中使用MUI时可能会遇到一些问题

主题不适用于 next.js 应用程序中的我的组件

问题描述投票：0回答：1

1个回答

最新问题

主题不适用于 next.js 应用程序中的我的组件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1