Babel.js 生成静态html时如何在react中导入css文件，并将导入css注入html头标记中？

cyvaqqii 于 2022-12-08 发布在 Babel

关注(0)|答案(3)|浏览(202)

我正在尝试使用renderToStaticMarkup方法从react生成静态html。我现在面临的问题是我无法将css导入到react组件中。我想在我的React组件中导入css，如css-模块（从'./style.css'导入样式）。然后将加载的css注入到生成的静态html头中。我该如何完成？
我不能使用webpack由于一些限制。如果有任何Babel插件可用于此特定情况下，然后请让我知道。
下面是我如何从react组件生成静态html：

const reactElement = require('react').createElement;
const ReactDomServer = require('react-dom/server');

const renderHTML = Component => {
  return ReactDomServer.renderToString(reactElement(Component))
}

babeljs

来源：https://stackoverflow.com/questions/57828922/how-to-import-css-file-in-react-when-generating-static-html-and-inject-imported

3条答案

按热度按时间

7gcisfzg1#

你可以传递一个URL作为一个 prop ，并呈现一个<link/>标签。在这里做了一个example，不确定这是否符合你的需要，或者你是否需要它作为一个样式标签。

赞(0）回复(0）举报 2022-12-08

km0tfn4u2#

如果没有大量的自定义逻辑，这可能会很有挑战性。
如果您只想为初始呈现内联CSS，然后在初始呈现后获取其余部分，styled-components可能是一个更好的选择，因为它完全支持您试图实现的功能，而无需过多配置：https://www.styled-components.com/docs/advanced#server-side-rendering

赞(0）回复(0）举报 2022-12-08

klr1opcd3#

也许我来晚了，你也可以这样创造它。

React.createElement("style", {},[ "body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}" ])

Output: 

  <style>
     body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
    </style>

因为createElement有3个参数，最后一个是children，我们可以把我们的vanila css作为children放在里面。你可以把任何导入的文件以字符串的形式放进去，它会转换成style标签

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js 生成静态html时如何在react中导入css文件，并将导入css注入html头标记中？

3条答案

相关问题

热门标签

最新问答