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(  
         
        
     )

 

 

例子：