Emotion: Component selectors can only be used in conjunction

[sptGabriel]

Hello following the docs to use the styled, but I got the following error:

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

code:

import styled from '@emotion/styled';
import { flexCenter, mxw80, flex, flexAlignCenter } from '../../globals/flex';
export const IconContainer = styled.div``;
export const SearchContainer = styled.div`
  display: inline-flex;
  align-items: center;
  flex: 0 1 350px;
  border: 1px solid #ccc;
  border-radius: 25px;
  overflow: hidden;
  height: 55px;
  background: white;
  ${IconContainer} {
    ${flexAlignCenter}
    width: 50px;
    padding: 0.5rem;
    height: 100%;
  }
  & > input {
    width: calc(100% - 50px);
    height: 100%;
    border: 0;
    padding: 0.5rem 0.5rem 0.5rem 0;
    outline: none;
  }
`;

jsx:

      <SearchContainer>
        <IconContainer>
          <FontAwesomeIcon
            className="searchIcon"
            icon={faSearch}
            size="lg"
            fixedWidth
            color="#1976d2"
          />
        </IconContainer>
        <input></input>
      </SearchContainer>

.babelrc:

{
  "plugins": [
    [
      "emotion",
      {
        // sourceMap is on by default but source maps are dead code eliminated in production
        "sourceMap": true,
        "autoLabel": process.env.NODE_ENV !== "production",
        "labelFormat": "[local]",
        "cssPropOptimization": true
      }
    ]
  ],
  "presets": [
    [
      "@emotion/babel-preset-css-prop",
      {
        "autoLabel": true,
        "labelFormat": "[local]"
      }
    ]
  ]
}

I looked for this error and found no solution

[Andarist]

Please share a runnable repro case for your problem, we cant help you without such.

[sptGabriel]

https://codesandbox.io/s/trusting-murdock-w0q2y
here my code example

[Andarist]

This codesandbox is using Create React App template and you can't customize babel plugins with that. This is, by design, not allowed when using CRA.

However they support Babel macros and we provide one, so if you make this change:

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

This starts to work as expected.

[sptGabriel]

Thanks, it really worked with that, I had followed the emotion documentation, could I ask just one more question?
I didn't find anything about how to import a font using

font like Roboto

[Andarist]

https://emotion.sh/docs/globals

<Global
  styles={"@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');"}
/>