Component selectors can only be used in conjunction with babel-plugin-emotion error while using emotion

Question

I have a styled component like

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;


`

I ran the below command to add babel-plugin-emotion

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

I get this error

what else do I need to do to get the plugin working with emotion?

Answer 1

Turns out you can remove the module babel-plugin-emotion and use macros provided by emotion.

Use the following import

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

That's it and you are good to go.