Как использовать таблицы стилей в приложении React Server Side Rendererd?

Question

Я пытаюсь преобразовать свое приложение ReactJS в Universal App с рендерингом на стороне сервера, но есть кое-что, чего я не понимаю. Каков наилучший способ использования и импорта стилей для моих компонентов? Могу ли я просто импортировать внешнюю таблицу стилей в 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

Вы можете использовать имена классов, простую и маленькую библиотеку 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, из которого вы импортировали стили.