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-aphrodite/pages/index.js
Grokling 7c8d0246e2 Add rehydration to example/aphrodite (#1858)
* Add rehydration to example/aphrodite

* linting

* replaced yarn.lock
2017-05-10 00:33:39 +02:00

36 lines
747 B
JavaScript

import React from 'react'
import { StyleSheet, css } from 'aphrodite'
if (typeof window !== 'undefined') {
/* StyleSheet.rehydrate takes an array of rendered classnames,
and ensures that the client side render doesn't generate
duplicate style definitions in the <style data-aphrodite> tag */
StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
}
export default () => (
<div className={css(styles.root)}>
<h1 className={css(styles.title)}>My page</h1>
</div>
)
const styles = StyleSheet.create({
root: {
width: 80,
height: 60,
background: 'white',
':hover': {
background: 'black'
}
},
title: {
marginLeft: 5,
color: 'black',
fontSize: 22,
':hover': {
color: 'white'
}
}
})