11

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

enter image description here

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

iJK
  • 4,655
  • 12
  • 63
  • 95

1 Answers1

15

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.

iJK
  • 4,655
  • 12
  • 63
  • 95
  • 1
    what version of emotion does this apply to? – Daniel Lizik Apr 19 '21 at 01:34
  • For me this didn't work presumably because I'm using typescript and not just javascript, and errors with: `Component selectors can only be used in conjunction with @emotion/babel-plugin.` – Kzqai Dec 04 '21 at 01:17
  • @Kzqai did you find any solutions for this issue ? Got this error when swiched CRA to Vite. 2 days wasted already. – Oliver Ilmjärv Aug 11 '22 at 10:30
  • @OliverIlmjärv None of my projects are really using emotion any more, (though I certainly would still try to use it, it's a good approach). – Kzqai Aug 11 '22 at 19:25