如何在服务器端渲染中将样式应用于 Next.js 中的 HTML?
Posted
技术标签:
【中文标题】如何在服务器端渲染中将样式应用于 Next.js 中的 HTML?【英文标题】:How to apply styles to the HTML in Next.js at server side render? 【发布时间】:2021-10-16 21:48:26 【问题描述】:访问Next.js 并注意网络选项卡中的页面请求。预览不仅显示 html,而且显示完全预先设置样式的页面。
当我们使用Styled-Components
和Material-UI
时,它们暴露了ServerStyleSheet
,它用于为HTML 中的第一次渲染提供所需的样式。
import ServerStyleSheet from 'styled-components'
import ServerStyleSheets from '@material-ui/core/styles'
使用react-bootstrap
或test.css
之类的自定义css 时如何实现相同的输出?
【问题讨论】:
【参考方案1】:您是否关心它是 test.css 还是 React 引导程序 - 为什么不直接内联所有关键样式表?
可能值得尝试他们的实验性功能
将
experimental: optimizeCss: true
添加到 next.config.js 安装 critters@0.0.7 作为依赖项
通过How to inline CSS in the head tag of a NextJS project?
【讨论】:
【参考方案2】:使用 Tailwind CSS
https://tailwindcss.com/
我们可以简单地使用类,它让你的设计变得超级简单
【讨论】:
嘿阿达什!虽然 Tailwind 是一个很棒且有用的工具,但它实际上并不能解决他的问题。他们想知道如何通过react-bootstrap
或其他样式实现这一目标。【参考方案3】:
在_app文件上添加你的样式文件,你可以在nextjs的pages目录中创建这个文件
import AppProps from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../your_style.css";
function App( Component, pageProps : AppProps)
return <Component ...pageProps />;
export default App;
对于 react-bootstrap ,需要添加npm i react-bootstrap bootstrap
【讨论】:
【参考方案4】:Nextjs 允许您显示 SSG/s-s-r 页面和禁用 javascript 用户仍然可以看到您的应用,但布局会很混乱 如果你使用 react-bootstrap 组件来构建你的布局。
在 s-s-r 中使用 react-bootstrap:
安装:
npm i react-bootstrap bootstrap
在您的_app.js
中导入引导样式:
import 'bootstrap/dist/css/bootstrap.min.css';
然后您可以像在 reactjs 中一样使用您的 react-bootstrap components
:
import Container, Row, Col from 'react-bootstrap';
const Layout = () => (
<>
<Container fluid>
<Row>
<Col>
<p>Running on Next.js at s-s-r</p>
</Col>
</Row>
</Container>
</>
);
export default Layout;
【讨论】:
以上是关于如何在服务器端渲染中将样式应用于 Next.js 中的 HTML?的主要内容,如果未能解决你的问题,请参考以下文章
Next.js:如何将仅外部客户端的 React 组件动态导入到开发的服务器端渲染应用程序中?
像 next.js 这样的服务器端渲染中状态管理的最佳方法是啥?