如何在React Server Side Rendererd App上使用样式表？

Question

I am trying to convert my ReactJS application to Universal App with server-side rendering, but there is something that I don't understand. What is the best way to use and import styles to my components? Can I just import external stylesheet in HTML and use this all over my components? or import specific stylesheet to every component and use it as separate variables like this :

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>
    );
  }
}

with the second approach, I have noticed that every time I do refresh my page, the styles are kinda too slow to load, and for one second I see my page without any CSS, and then I see my full page with CSS. There is any way to bypass that without external and global stylesheet? Like for example, Airbnb does. Maybe with some way to wait until all styles are loaded?

Also after I moved my app to server-side render, I get some strange warnings like this :

Answer 1

You can use classnames , a simple and small JS library to import and use css in your react components:

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 can have any JS expression inside it or just plain class name from css you have imported styles from.