我正在一个项目中,我们将样式元素与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。