reactjs - helmet - style react

Representación del lado del servidor React de módulos CSS

Question

La práctica actual de CSS con los componentes de React parece estar usando el cargador de estilo de webpack para cargarlo en la página.

import React, { Component } from ''react'';
import style from ''./style.css'';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

Al hacer esto, el cargador de estilo inyectará un elemento <style> en el DOM. Sin embargo, el <style> no estará en el DOM virtual y, por lo tanto, si se realiza una representación del lado del servidor, el <style> se omitirá. Esto causa que la página tenga FOUC .

¿Hay algún otro método para cargar módulos CSS que funcionen tanto en el servidor como en el lado del cliente?

Answer 1

Puede usar webpack/extract-text-webpack-plugin . Esto creará una hoja de estilo redistribuible independientemente a la que puede hacer referencia a partir de sus documentos.

Answer 2

Puedes echarle un vistazo al isomorphic-style-loader . El cargador fue creado específicamente para resolver este tipo de problemas.

Sin embargo, para usar esto, debe usar un método _insertCss() provisto por el cargador. La documentación detalla cómo usarlo.

Espero que haya ayudado.