mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
update with-emotion example to emotion 10 (#5770)
This commit is contained in:
parent
f1fe237ba8
commit
af1d10c941
|
@ -3,6 +3,6 @@
|
|||
"next/babel"
|
||||
],
|
||||
"plugins": [
|
||||
["emotion", { "inline": true }]
|
||||
["emotion"]
|
||||
]
|
||||
}
|
|
@ -7,13 +7,12 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-plugin-emotion": "^8.0.4",
|
||||
"emotion": "^8.0.5",
|
||||
"emotion-server": "^8.0.5",
|
||||
"@emotion/core": "^10.0.0",
|
||||
"@emotion/styled": "^10.0.0",
|
||||
"babel-plugin-emotion": "^10.0.0",
|
||||
"next": "latest",
|
||||
"react": "16.2.0",
|
||||
"react-dom": "16.2.0",
|
||||
"react-emotion": "^8.0.5"
|
||||
"react": "^16.3.0",
|
||||
"react-dom": "^16.3.0"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
@ -1,32 +0,0 @@
|
|||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
import { extractCritical } from 'emotion-server'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static getInitialProps ({ renderPage }) {
|
||||
const page = renderPage()
|
||||
const styles = extractCritical(page.html)
|
||||
return { ...page, ...styles }
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
const { __NEXT_DATA__, ids } = props
|
||||
if (ids) {
|
||||
__NEXT_DATA__.ids = ids
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<html>
|
||||
<Head>
|
||||
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -1,23 +1,7 @@
|
|||
import React from 'react'
|
||||
import Head from 'next/head'
|
||||
import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion'
|
||||
|
||||
// Adds server generated styles to emotion cache.
|
||||
// '__NEXT_DATA__.ids' is set in '_document.js'
|
||||
if (typeof window !== 'undefined') {
|
||||
hydrate(window.__NEXT_DATA__.ids)
|
||||
}
|
||||
|
||||
injectGlobal`
|
||||
html, body {
|
||||
padding: 3rem 1rem;
|
||||
margin: 0;
|
||||
background: papayawhip;
|
||||
min-height: 100%;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
}
|
||||
`
|
||||
import styled from '@emotion/styled'
|
||||
import { keyframes, css, Global } from '@emotion/core'
|
||||
|
||||
const basicStyles = css`
|
||||
background-color: white;
|
||||
|
@ -69,7 +53,18 @@ const Animated = styled.div`
|
|||
|
||||
export default () => {
|
||||
return (
|
||||
<>' '<Head>
|
||||
<>' '<Global
|
||||
styles={css`
|
||||
html, body {
|
||||
padding: 3rem 1rem;
|
||||
margin: 0;
|
||||
background: papayawhip;
|
||||
min-height: 100%;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
}
|
||||
`}
|
||||
/>' '<Head>
|
||||
<title>With Emotion</title>
|
||||
</Head>' '<div>
|
||||
<Basic>Cool Styles</Basic>
|
||||
|
|
Loading…
Reference in a new issue