Brief showcase of all styling sources exposed by element-styles.

2.element-styles.jsx

import { styled, StylesProvider } from 'element-styles'

// 1. Default styles
const defaults = {
  container: { border: 'solid 3px currentColor', background: 'white' },
  inner: { color: 'currentColor' }
}
@styled(defaults)
class Button extends Component { ... }

// 2. Local overriding styles
const localOverrides = {
  container: { background: 'papayawhip' }
}
<Button styles={localOverrides} />

// 3. “Global” overriding styles
const componentSelectors = {
  'Button': {
    inner: { fontWeight: 'bold' }
  }
}
const App = () => (
  <StylesProvider components={componentSelectors}>
    <Button>Hey!</Button>
  </StylesProvider>
)