nextjs中使用css in js，header结构在刷新之后变了

一开始是用styled-components 也就是css in js的方案来写最外层的包裹

import styled from "styled-components";

const NavWrapper = styled.div`
	 display:flex;//发现刷新之后html结构变了 而且display变成了block 
`;

//...
<NavWrapper>
...
</NavWrapper>

翻看文档

We bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.

也就是说next使用了 styled-jsx 来支持独立的css作用域，但是它不支持服务端渲染 而且只能用 js

所以我写的NavWrapper 不会在服务端预渲染的时候被应用上，返回的html结构就不对

所以后面我直接在写行内,样式在刷新的时候就不变了 但是行内样式也是css in js，为什么会这样？

这是因为行内样式在客户端加载时会立即应用，可是使用styled-components在客户端也会立即应用

作为一个workaround给大家参考