1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-style-sheet/pages/index.js
Giuseppe c95abc209b Add with style-sheet example (#5572)
* Remove pathname (#5428)

Same as #5424

* fix typo (#5451)

* Add with style-sheet example

* Fix readme

* Fix typo
2018-11-01 14:05:39 +01:00

30 lines
736 B
JavaScript

import React from 'react'
import { StyleSheet, StyleResolver } from 'style-sheet'
const cls = StyleResolver.resolve
export default () => (
<div className={cls([styles.root, styles.color])}>
<div>Hello from <span className={cls(styles.brand)}>Next.js</span></div>
</div>
)
const styles = StyleSheet.create({
root: {
fontSize: 30,
fontFamily: 'sans-serif',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
backgroundImage: 'radial-gradient(circle, #D7D7D7, #D7D7D7 1px, #FFF 1px, #FFF)',
backgroundSize: '1em 1em'
},
color: {
// showcasing dynamic styles
color: Math.random() > 0.5 ? '#111' : '#222'
},
brand: {
fontWeight: 'bold'
}
})