[andrewingram]

Except as far as I can tell, with Radium you get zero support for pseudo classes and media queries until after the client-side JavaScript has downloaded and been initialised. This is acceptable if it's purely a client-side app, but if you're using an kind of server-side rendering it's clearly not good enough.

I really don't want a lack of hover or focus effects on initial page load, and I really don't want my entire page layout to change once the JavaScript-powered media queries kick in.

[aleem]

Radium is simple, for that I like it. Complexity comes with a price and there may be alternatives but Radium leverages JS expressions which I like. Quoting from the article again:

  /* components/submit-button.jsx */
  import { Component } from 'react';
  import styles from './submit-button.css';
  
  export default class SubmitButton extends Component {
    render() {
      let className, text = "Submit"
      if (this.props.store.submissionInProgress) {
        className = styles.inProgress
        text = "Processing..."
      } else if (this.props.store.errorOccurred) {
        className = styles.error
      } else if (!this.props.form.valid) {
        className = styles.disabled
      } else {
        className = styles.normal
      }
      return <button className={className}>{text}</button>
    }
  }

That looks unwieldy -- 4 if/else clauses just to deal with CSS. Contrast that with the example in "Usage" over at the Radium page https://github.com/FormidableLabs/radium -- much simpler.

[andrewingram]

If we were to mirror the approach of the Radium example, we'd actually end up with something more like this:

  import React from 'React';
  import styles from './SubmitButton.css';

  class SubmitButton extends Component {
    defaultProps = {
      kind: 'default'
    }
    
    render() {
      const { kind } = this.props;
      const text = kind === 'in-progress' ? 'Processing...' : 'Submit';
      
      return <button className={styles[kind]}>{text}</button>
    }
  }