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-cxs/pages/index.js
Arana Jhonny 23574b5489 Support for cxs rehydration and removal of duplicate styles. (#1860)
* add cxs.rehydrate.

* add id='cxs-style'.
2017-05-06 11:37:47 -07:00

37 lines
672 B
JavaScript

import React from 'react'
import cxs from 'cxs/lite'
// Using cxs/lite on both the server and client,
// the styles will need to be rehydrated.
if (typeof window !== 'undefined') {
const styleTag = document.getElementById('cxs-style')
const serverCss = styleTag.innerHTML
cxs.rehydrate(serverCss)
}
export default () => (
<div className={cx.root}>
<h1 className={cx.title}>My page</h1>
</div>
)
const cx = {
root: cxs({
width: 80,
height: 60,
background: 'white',
':hover': {
background: 'black'
}
}),
title: cxs({
marginLeft: 5,
color: 'black',
fontSize: 22,
':hover': {
color: 'white'
}
})
}