Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoCo_Code_Op2
next.js
提交
5bd3a5f1
N
next.js
项目概览
CoCo_Code_Op2
/
next.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
next.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5bd3a5f1
编写于
7月 07, 2017
作者:
J
Josh Hawkins
提交者:
Tim Neutkens
7月 07, 2017
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update emotion example to use css instead of fragment (#2497)
上级
df1cd7eb
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
12 addition
and
16 deletion
+12
-16
examples/with-emotion/package.json
examples/with-emotion/package.json
+1
-1
examples/with-emotion/pages/index.js
examples/with-emotion/pages/index.js
+11
-15
未找到文件。
examples/with-emotion/package.json
浏览文件 @
5bd3a5f1
...
...
@@ -7,7 +7,7 @@
"start"
:
"next start"
},
"dependencies"
:
{
"emotion"
:
"^5.
0.0
"
,
"emotion"
:
"^5.
1.4
"
,
"next"
:
"^2.4.6"
,
"react"
:
"^15.6.1"
,
"react-dom"
:
"^15.6.1"
...
...
examples/with-emotion/pages/index.js
浏览文件 @
5bd3a5f1
import
React
from
'
react
'
import
{
hydrate
,
keyframes
,
fragment
,
injectGlobal
}
from
'
emotion
'
import
{
hydrate
,
keyframes
,
css
,
injectGlobal
}
from
'
emotion
'
import
styled
from
'
emotion/react
'
// Adds server generated styles to emotion cache.
...
...
@@ -20,7 +20,7 @@ export default () => {
}
`
const
basicStyles
=
fragment
`
const
basicStyles
=
css
`
background-color: white;
color: cornflowerblue;
border: 1px solid lightgreen;
...
...
@@ -31,11 +31,13 @@ export default () => {
margin: 3rem 0;
padding: 1rem 0.5rem;
`
const
hoverStyles
=
fragment
`
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
const
hoverStyles
=
css
`
&:hover {
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
}
`
const
bounce
=
keyframes
`
from {
...
...
@@ -48,19 +50,13 @@ export default () => {
const
Basic
=
styled
.
div
`@apply
${
basicStyles
}
;`
const
Combined
=
styled
.
div
`
@apply
${
basicStyles
}
;
&:hover {
@apply
${
hoverStyles
}
;
}
composes:
${
basicStyles
}
${
hoverStyles
}
;
& code {
background-color: linen;
}
`
const
Animated
=
styled
.
div
`
@apply
${
basicStyles
}
;
&:hover {
@apply
${
hoverStyles
}
;
}
composes:
${
basicStyles
}
${
hoverStyles
}
;
& code {
background-color: linen;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录