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))
}

Answer 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.

Answer 2

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

Answer 3

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