css - 如何在 React 服务器端 Rendererd 应用程序上使用样式表？

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 中的普通类名。