how to import css file in react when generating static html and inject imported css into html head tag?

Question

I am trying to generate static html from react using renderToStaticMarkup method. The problem I am facing right now is that I am not able to import css into react component. I want to import css in my React components like css-modules (import styles from './style.css'). And then inject that loaded css into generated static html head. How can I accomplish that?

P.S. I can't use webpack due to some constraints. If there is any babel plugin availabe for this specific case, then please let me know.

Here is how I am generating static html from react component:

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

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

If you have a static URL for the stylesheet, you could render a <link> tag. But if it has to go into <head> and you're not rendering that with React you'd need to resort to plain old JS to select the head element. — Chris B.
– Chris B., Commented Sep 6, 2019 at 23:21

skovy · Accepted Answer · 2019-09-06 22:31:33Z

1

This may be challenging without a lot of custom logic.

If you want to inline the CSS only for the initial render and then fetch the rest after the initial render, styled-components may be a better option because it supports exactly what you're trying to achieve without too much configuration: https://www.styled-components.com/docs/advanced#server-side-rendering

answered Sep 6, 2019 at 22:31

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user10169731 Over a year ago

I am generating static html only which will not have any JavaScript. It will be just plain html with internal styling. This is what I am not able to achieve. One plugin I found which might have worked for me (npmjs.com/package/babel-plugin-transform-import-css), but this plugin make use of load-styles package, which need document object. And in node env, that is not available.

Chris B. · Accepted Answer · 2019-09-06 23:45:36Z

1

You can pass a URL in as a prop and render a <link/> tag. Made an example here, not sure if that would meet your needs or if you need it to be a style tag.

answered Sep 6, 2019 at 23:45

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

Comments

Syed Qasim Ahmed · Accepted Answer · 2022-11-23 18:39:02Z

0

May be I am too late you can also create It like this way.

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>

Since createElement take 3 params and last one is children we can put our vanila css inside it as a children. You can put any imported file in the form of string and it will convert to style tag

edited Nov 23, 2022 at 18:39

answered May 10, 2022 at 11:58

Syed Qasim Ahmed

1,36213 silver badges24 bronze badges

Collectives™ on Stack Overflow

how to import css file in react when generating static html and inject imported css into html head tag?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related