如何在React Server Side Rendererd App上使用Stylesheets？

Question

我正在尝试将我的ReactJS应用程序转换为使用服务器端渲染的Universal App，但有些东西我不明白。使用和导入样式到组件的最佳方法是什么？我可以在HTML中导入外部样式表并在我的组件中使用它吗？或者将特定样式表导入每个组件，并将其用作单独的变量，如下所示：

{
  "data": [
     <LOTS OF COMMENTS HERE>
  ],
  "paging": {
    <PAGING LINKS>
  },
  "summary": {
    "order": "chronological",
    "total_count": 50,
    "can_comment": true
  }
}

使用第二种方法，我注意到每次刷新页面时，样式加载都太慢了，一秒钟我看到我的页面没有任何CSS，然后我看到我的整页用CSS 。没有外部和全局样式表，有什么方法可以绕过它吗？例如，Airbnb就是这样做的。也许用某种方式等待所有样式加载？

在我将我的应用程序移动到服务器端渲染之后，我收到了一些奇怪的警告：

Answer 1

您可以使用classnames这个简单的小型JS库来导入和使用反应组件中的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的普通类名。