无法覆盖包中样式化组件的SSR样式

时间:2020-04-23 06:57:03

标签: next.js server-side-rendering styled-components

我正在一个项目中,我们将样式元素与NextJS一起用于服务器端渲染。我们使用一个私有软件包,该软件包包含在多个自定义项目中。该私有软件包包含样式,但是在某些项目中,我们希望使用自定义样式覆盖样式,如下面的代码所示。似乎与组件选择器${H1}找不到实际的H1组件有关。为什么会这样?

私有软件包中的代码:

const baseHeading = css`
    font-family: ${(props) => props.theme.fonts.sec};
    display: block;
    line-height: 1.3;
    font-weight: bold;
`;
export const H1Styles = css`
    font-size: ${(props) => props.theme.fonts.content.headings.h1.b1};
    text-transform: uppercase;

    @media screen and (min-width: ${size.min.b4}) {
        font-size: ${(props) => props.theme.fonts.content.headings.h1.b4};
    }
`;
export const H1 = styled.h1`
    ${baseHeading};
    ${H1Styles};
`;

自定义组件中的代码:


import { H1 } from '@testproject/testproject-core-ui'
....
<section className={className}>
    <FooterBrandingInner>
        <H1>
            <span>{params.LeftColumnTitleRow1}</span>
            <span>{params.LeftColumnTitleRow2}</span>
        </H1>
        ....

const FooterBrandingInner = styled.div`
    ${H1} {
        font-size: 3.8rem;
        text-transform: none;
        line-height: 1.2;
    }
    ....

_document.tsx中的代码

static async getInitialProps(ctx: any) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    try {
        ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />),
            });

        const initialProps = await Document.getInitialProps(ctx);
        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {sheet.getStyleElement()}
                </>
            ),
        };
    } finally {
        sheet.seal();
    }
}

.babelrc中的代码

[
    "babel-plugin-styled-components",
    {
        "ssr": true,
        "displayName": true,
        "preprocess": false
    }
]

预期行为

我希望在服务器端渲染时看到没有'text-transform:大写'的H1。

实际行为

当我们访问具有在自定义类中定义的自定义样式的页面时,在服务器端渲染时将看不到该页面。当我们不是服务器端渲染时,我们会看到它。有时我们确实会看到自定义样式的闪烁,并且似乎在组件上使用了错误的ClassName。

0 个答案:

没有答案