Skip to content

Instantly share code, notes, and snippets.

@loklaan

loklaan/2.element-styles.jsx

Created November 20, 2017 05:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save loklaan/715df70a9d52af0d32574cbcb9a972f3 to your computer and use it in GitHub Desktop.
Save loklaan/715df70a9d52af0d32574cbcb9a972f3 to your computer and use it in GitHub Desktop.
Download ZIP
Brief showcase of all styling sources exposed by element-styles.
Raw
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>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment