Styled Component ReferenceError: Cannot access 'Component' before initialization

Question

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

ReferenceError: Cannot access 'SiteHeader' before initialization

这是代码

//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);
`;

Answer 1

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

Answer 2

看来这里的问题是存在循环依赖； Common.ts 正在导入 header.tsx，header.tsx 正在导入 Common.ts。因此，构建工具无法确定应首先解析哪个文件，并且在解析 Container 时未定义 SiteHeader。这是一个 JS 问题，而不是 styled-components 问题。

此问题的解决方案是确保导入仅沿一个方向进行。最简单的方法是将 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;
    }
`;

Header:

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>
    );
}

Styled Component ReferenceError: Cannot access 'Component' before initialization

Styled Component ReferenceError: Cannot access 'Component' before initialization

javascript

reactjs

styled-components

craco