Emotion styled components not applying rules

Question

I'm trying to use emotion.

My .js code is:

import React from 'react';
import { css } from '@emotion/core';

export const Menu = () => (

  <>
  <nav
    css={css`
      position: absolute;
      color: white;
    `}
  >
    <h1
      css={css`
        color: white;
      `}
    >
     Title
    </h1>
    <ul>
      <li>Proyectos</li>
      <li>Blog</li>
      <li>Acerca</li>
      <li>Contacto</li>
    </ul>
  </nav>
  </>

);

export default Menu;

When inspecting the element, I get this instead:

You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).

Answer 1

Use JSX Pragma with jsx function from '@emotion/react'. This allow use css prop.

Docs: https://emotion.sh/docs/css-prop#jsx-pragma

/** @jsx jsx */
import { jsx } from '@emotion/react'
import { css } from '@emotion/core'

const App = () => (
  <nav
    css={css`
      position: absolute;
      color: white;
    `}
  >
    <h1
      css={css`
        color: white;
      `}
    >
      Title
    </h1>
    <ul>
      <li>Proyectos</li>
      <li>Blog</li>
      <li>Acerca</li>
      <li>Contacto</li>
    </ul>
  </nav>
)