mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
30 lines
736 B
JavaScript
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'
|
||
|
|
}
|
||
|
|
})
|