React Server Side Rendererd Appでスタイルシートを使用するには？

Question

ReactJSアプリケーションをサーバ側レンダリングを使用してユニバーサルアプリケーションに変換しようとしていますが、わからないことがあります。コンポーネントを使用してスタイルをコンポーネントにインポートする最も良い方法は何ですか？ HTMLで外部スタイルシートをインポートし、これをコンポーネント全体に使用できますか？またはすべてのコンポーネントに特定のスタイルシートをインポートして、別のこのような変数としてそれを使用します、私は私がやるたびに私のページを更新していることに気づいた第二のアプローチで

import s from './about.css'; 

export default class About extends Component { 
    render() { 
    return (
     <div> 
     <div className={`${s.divone} row`}> 
      <span>Hello world</span> 
     </div> 
     <div className={s.divtwo}> 
      <span>bye world</span> 
     </div> 
     </div> 
    ); 
    } 
} 

、スタイルがロードにちょっと遅すぎる、と私は1秒間CSSなしのページを見て、それからCSSでフルページを見る。外部およびグローバルスタイルシートなしでそれをバイパスする方法はありますか？たとえば、Airbnbはそうです。おそらく、すべてのスタイルがロードされるまで待つ方法がありますか？あなたがでCSSをインポートして使用するclassnames、シンプルで小型JSライブラリを使用することができます

Answer 1

：私は、サーバー側に私のアプリは、レンダリングに移動した後

はまた、私はこのようないくつかの奇妙な警告を取得しますあなたは、コンポーネントの反応：

import styles from './css/yourcss.css' 
import classnames from 'classnames/bind' 

const cx = classnames.bind(styles) 

// use in react component 
<div className={cx('mydiv')}></div> 

cxがあなたからスタイルをインポートした任意のその中にJS表現やCSSから単なるクラス名を持つことができます。