使用情感时，组件选择器只能与 babel-plugin-emotion 错误结合使用

Question

我有一个像这样的样式组件

export const UL = styled.ul`
  list-style: none
`
export const Nav = styled.nav`
  ${UL}: {
    margin-top: 40px;
  }

  background-color: #222;
  padding: 0.35em 1.25em;


`

我运行以下命令来添加 babel-plugin-emotion

npm i --save-dev babel-plugin-emotion

我收到这个错误

我还需要做什么才能让插件与情感一起工作？

Answer 1

原来你可以删除模块 babel-plugin-emotion 并使用emotion提供的宏。

使用以下导入

import styled from "@emotion/styled/macro";

就是这样，你很高兴去。