Styling in stateless UI components

Keep styles separated from the parts of the app that are tied to state.
That means routes, views, containers, forms, layouts, etc. should not have any styling or classes in them.
Instead, these heavy-lifting components should be composed of primarily stateless functional UI components.

Form component (with no styles/classNames) - just pure composed components

  1. class SampleComponent extends Component {
  2.   render() {
  3.     return (
  4.       <form onSubmit={this.handleSubmit}>
  5.         <Heading children='Sign In'/>
  6.         <Input
  7.           name='username'
  8.           value={username}
  9.           onChange={this.handleChange}/>
  10.         <Input
  11.           type='password'
  12.           name='password'
  13.           value={password}
  14.           onChange={this.handleChange}/>
  15.         <Button
  16.           type='submit'
  17.           children='Sign In'/>
  18.       </form>
  19.     )
  20.   }
  21. }
  23. // Presentational component (with Styles)
  24. const Button = ({
  25.   ...props
  26.   }) => {
  27.   const sx = {
  28.     fontFamily: 'inherit',
  29.     fontSize: 'inherit',
  30.     fontWeight: 'bold',
  31.     textDecoration: 'none',
  32.     display: 'inline-block',
  33.     margin: 0,
  34.     paddingTop: 8,
  35.     paddingBottom: 8,
  36.     paddingLeft: 16,
  37.     paddingRight: 16,
  38.     border: 0,
  39.     color: 'white',
  40.     backgroundColor: 'blue',
  41.     WebkitAppearance: 'none',
  42.     MozAppearance: 'none'
  43.   }
  45.   return (
  46.     <button {...props} style={sx}/>
  47.   )
  48. }