样式化组件引用错误：初始化前无法访问“组件”答案

【问题标题】：Styled Component ReferenceError: Cannot access 'Component' before initialization样式化组件引用错误：初始化前无法访问“组件”
【发布时间】：2021-09-07 12:32:01
【问题描述】：

在样式化组件中引用另一个组件时出现此错误

ReferenceError: 在初始化之前无法访问“SiteHeader”

这里是代码

//Common.ts

import styled from 'styled-components/macro';
import { SiteHeader } from '../Theme/Layout/Header';

export const Container = styled.div`
    padding: 0 15px;
    ${SiteHeader} & {
        padding-top: 20px;
        padding-bottom: 20px;
    }
`;

//header.tsx

import { Container } from '../../Styles/Common';
import styled from 'styled-components/macro';

export default function Header(): JSX.Element {
    return (
        <SiteHeader>
            <Container>
                {/*navigation*/}
            </Container>
        </SiteHeader>
    );
}

export const SiteHeader = styled.header`
    background: var(--green-kelp);
`;

【问题讨论】：

我在扩展不同文件中定义的组件时经常看到这个错误。我认为 Styled Components 应该允许它，但它们目前不允许。作为替代方法可能围绕他们的 ThemeProvider 功能构建？

标签： javascript reactjs styled-components craco

【解决方案1】：

看起来这里的问题是存在循环依赖； Common.ts 正在导入 header.tsx，header.tsx 正在导入 Common.ts。结果，构建工具无法确定应该首先解析哪个文件，并且在解析Container 时没有定义SiteHeader。这是一个 JS 问题，而不是样式组件问题。

解决此问题的方法是确保导入仅在 1 个方向上进行。最简单的方法是将SiteHeader 移动到它自己的文件中：

SiteHeader.js：

const SiteHeader = styled.header`
    background: var(--green-kelp);
`;

export default SiteHeader

常见：

import { SiteHeader } from './SiteHeader';

export const Container = styled.div`
    padding: 0 15px;
    ${SiteHeader} & {
        padding-top: 20px;
        padding-bottom: 20px;
    }
`;

标题：

import styled from 'styled-components/macro';

import SiteHeader from '../SiteHeader';
import { Container } from '../../Styles/Common';

export default function Header(): JSX.Element {
    return (
        <SiteHeader>
            <Container>
                {/*navigation*/}
            </Container>
        </SiteHeader>
    );
}

【讨论】：

乔希，你的粉丝。其实我是按照你的文章来实现的。

【解决方案2】：

当您尝试为在其父组件之后定义的子组件设置样式时会出现此错误。

【讨论】：