如何在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>
    );
  }
}

使用第二種方法時，我已經注意到，每次刷新頁面時，樣式都加載得太慢了，一秒鍾后，我看到頁面沒有任何CSS，然后看到了整個CSS頁面。 沒有外部和全局樣式表，有什么方法可以繞過它？ 例如，Airbnb確實如此。 也許以某種方式等待所有樣式加載完畢？

同樣在將我的應用程序移至服務器端渲染后，我得到了一些奇怪的警告，如下所示：

Answer 1

您可以使用classnames （一個簡單的小型JS庫）在react組件中導入和使用css：

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中的純類名。