Search code examples
reactjsemotion

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

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?

Solution

  • 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.