Невозможно переопределить стиль SSR для стилизованных компонентов из пакетов - PullRequest
Новая
       31

Невозможно переопределить стиль SSR для стилизованных компонентов из пакетов

0 голосов
/ 23 апреля 2020

Я работаю над проектом, в котором мы используем Styled Components с Next JS для рендеринга на стороне сервера. Мы используем частный пакет, который мы включаем в несколько пользовательских проектов. Этот закрытый пакет содержит стили, но в некоторых проектах мы хотим переопределить стили с помощью наших собственных стилей, как видно из кода ниже. Кажется, что это как-то связано с селектором компонента ${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();
    }
}

Код в .babelr c

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

Ожидаемое поведение

Я бы ожидал увидеть H1 без 'text-transform: uppercase' при рендеринге на стороне сервера.

Actual Behavior

Когда мы заходим на страницу с пользовательским стилем, который определен в наших пользовательских класс, мы не увидим его при рендеринге на стороне сервера. Мы видим это, когда не выполняем рендеринг на стороне сервера. Иногда мы видим флаг sh пользовательского стиля и кажется, что в компоненте используются неправильные имена классов.

...