如何在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中的纯类名。