Nextjs 14 上的 Styled-Components 的 ThemeProvider 和 prop 主题

Question

我在使用样式组件生成主题时遇到一些问题。乍一看，这个错误似乎是一个简单的修复，但我无法弄清楚问题出在哪里。

理论上我认为我已经正确配置了所有内容，但我不明白为什么我无法访问调色板道具，知道为什么吗？

BodyComponent.tsx

"use client";
// Vendors
import { PropsWithChildren, ReactElement } from "react";
import { ThemeProvider } from 'styled-components';
// styles
import AppTheme from "@/theme/ui.theme";

const BodyComponent = ({children, className}: PropsWithChildren<{className: string}>): ReactElement => {
  
  return (
    <body className={className}>
      <ThemeProvider theme={AppTheme}>
        { children }
      </ThemeProvider>
    </body>
  );
};

export default BodyComponent;

主题.ts

const mode_colors = {
  light: '255 255 255',
  dark: '0 0 0',
}

const status_colors = {
  colorSucessA: '#81c784',
  colorSucessB: '#66bb6a',
  colorSucessC: '#388e3c',
  colorWarningA: '#ffb74d',
  colorWarningB: '#ffa726',
  colorWarningC: '#f57c00',
  colorSeveralA: '#e57373',
  colorSeveralB: '#f44336',
  colorSeveralC: '#d32f2f',
};

const app_colors = {
  primaryColorA: '#FFC377',
  primaryColorB: '#FFAD45',
  primaryColorC: '#FF8E00',
  contrastColorA: '#d4dc85',
  contrastColorB: '#ccd75b',
  contrastColorC: '#2596be',
}

const AppTheme = {
  palette: {
    ...app_colors,
    ...status_colors,
    ...mode_colors,
  }
};

export default AppTheme;

样式组件文件

'use client';
// Vendors
import { css } from "styled-components";

const rootStyle = () => {
  return css`
    :root {
      --mode-background: rgb(${({theme}) => theme.palette.dark});
      --pattern-background: url(/patterns/graph-paper-dark.svg);
      --font-color: rgb(${({theme}) => theme.palette.light});
      
      @media (prefers-color-scheme: light) {
        --mode-background: rgb(${({theme}) => theme.palette.light});
        --pattern-background: url(/patterns/graph-paper-light.svg);
        --font-color: rgb(${({theme}) => theme.palette.dark});
      }
    }
  `;
};

我尝试修改该对象，使其仅具有颜色，在我调用 ThemeProvider 的文件中声明它，并修改元素的层次结构以查看它是否会影响任何内容。

我还尝试定义样式组件的类型

DefaultTheme

。

// Vendors
import { DefaultTheme } from "styled-components";
// Constants
import colors from "./constants/colors.constants";

const AppTheme: DefaultTheme = {
  palette: colors,
};

export default AppTheme;

Answer 1

问题来自元素的层次结构，在我的例子中，我有一个用于加载全局样式的组件，所有读取

theme

的文件都必须位于

ThemeProvider

内部。我的

ThemeProvider

来自

BodyComponent

。

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="en">
      <BodyComponent className={inter.className}>
        <GlobalStylesComponent />
        {children}
      </BodyComponent>
    </html>
  )
}

Nextjs 14 上的 Styled-Components 的 ThemeProvider 和 prop 主题

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

1个回答

最新问题

Nextjs 14 上的 Styled-Components 的 ThemeProvider 和 prop 主题

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

1个回答

最新问题

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