emotion使用笔记

 

emotion 9 升级到 10 了，所以9的用法就不总结了，官网上介绍的很详细。

点击传送门查看9升到10都变了哪些。

几点建议：

（1）10中尽量只用import styled from '@emotion/styled/macro'

原因是调试方便，可以方便地找到css文件。(需安装"@emotion/core": "^10.0.7","@emotion/styled": "^10.0.7")

但是nwb@0.23.0环境中babel的版本是6，使用import styled from '@emotion/styled/macro'会报错

Error: Can't resolve 'fs' in 'C:\work\New\k2-ui\node_modules\convert-source-map'

暂时用import styled from '@emotion/styled';

eg:

import styled from '@emotion/styled'

let SomeComp = styled.div({
  color: 'hotpink'
})

let AnotherComp = styled.div`
  color: ${props => props.color};
`

render(
  <SomeComp>
    <AnotherComp color="green" />
  </SomeComp>
)

 

 

例子：

用emotion写个grid组件