nteract CSS in JS writeup

style.js

// Some thoughts on component structure & styling

/*
Easiest way to do themes in Aphrodite - use prop as an obj key
Each component holds their own theme info
*/

import { css, StyleSheet } from 'aphrodite'

const Button = ({ theme }) => (
  <button className={css(styles[theme])} />
)

const styles = StyleSheet.create({
  default: {
    backgroundColor: 'blue'
  },
  christmas: {
    backgroundColor: 'red'
  }
})

/*
We prob don't want to include ALL themes w/ our react components out the box
For the npm package, we include only the default theme
Then, in the electron app, we can concat the themed styles onto the default via a style prop
*/

// @nteract/react-components/button.js
import { css, StyleSheet } from 'aphrodite'

const Button = ({ theme, style = {} }) => (
  <button className={css([styles.default, style])} />
)

const styles = StyleSheet.create({
  default: {
    backgroundColor: 'blue'
  }
})

// implementation of button in electron app
import { css, StyleSheet } from 'aphrodite'
import { Button } from '@nteract/react-components'

const ComponentUsingButton = ({ theme }) => (
  <Button style={theme !== 'default' && styles[theme]} />
)

const styles = StyleSheet.create({
  christmas: {
    backgroundColor: 'red'
  },
  halloween: {
    backgroundColor: 'black'
  }
})

/*
Alternative cleaner way to do themes - via a HOC
Themes live in separate files and are just JS objects

If we didn't want to write it ourselves, we could go with:
https://github.com/airbnb/react-with-styles

react-with-styles is cool because it's compatible w/ React Native StyleSheet, Radium, etc
The downside is that we will prob have to package @nteract/react-components with themes
You can't use react-with-styles' css() & also set className and style props

Also totally fine w/ styled-components if you want to go that route:
https://github.com/styled-components/styled-components/blob/master/docs/theming.md
*/