0

我正在尝试将我的 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 就是这样做的。也许通过某种方式等到所有样式都加载完毕？

此外，在我将应用程序移至服务器端渲染后，我收到一些奇怪的警告，如下所示：

在此处输入图像描述

4

1 回答 1

0

您可以使用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 中的普通类名。

于 2017-08-18T01:40:16.877 回答