TransWikia.com

CSS Emotion Library - Getting css props error when using css prop

Stack Overflow Asked by Tom Hanks on December 15, 2020

This is my code –

import { css, jsx } from '@emotion/core'

return (
       <>
       <img css={css`height: 200px; height: 200px;`} fluid={image.sharp.fluid} />
       <List>
           <li>Our Clients</li>
           <li>What We Do</li>
           <li>Contact</li>
       </List>
       </>
   )

This is the error I’m getting –

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

This error seems to be telling me that I need to do what I am already doing? Or am I missing something here..

4 Answers

As detailed in the Emotion documentation, use of the css prop requires you replace React with jsx as the target function for JSX elements (known as the “pragma”), which will enable Emotion to intercept the css prop and transform it into a className prop for React.

For example:

<p>Hi</p>

// Becomes the following by default:
React.createElement("p", {}, "Hi")

// But with the `jsx` pragma, it becomes:
jsx("p", {}, "Hi")

There are two outlined approaches to achieve this. You only need to select one. If you are able to configure Babel in your application, the first is the recommended approach, but either one works fine:

  1. Install a Babel plugin that will configure jsx as the default handler for all code in your app

    The most direct way to do this is by adding the relevant Babel preset to your Babel configuration like so:

    // Option 1A — Good
    // Add @emotion/babel-preset-css-prop to your dev dependencies, then
    // add the preset to your .babelrc configuration:
    
    {
      "presets": ["@emotion/babel-preset-css-prop"]
    }
    

    If you are able to do this, though, I recommend instead configuring babel-plugin-emotion, which includes the css prop configuration as well other features like minification, dead code elimination, and hoisting:

    // Option 1B — Better
    // Add babel-plugin-emotion to your dev dependencies, then add
    // the plugin to your Babel configuration (e.g. .babelrc)
    {
      "plugins": ["emotion"]
    }
    
  2. Import the jsx function from Emotion and instruct Babel to use this imported function on a per-file basis using pragma

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

Answered by coreyward on December 15, 2020

Just wanted to note I had this issue and adding this fixed the error for me:

/** @jsx jsx */
import { jsx } from '@emotion/core';

Just to clarify, you have to add /** @jsx jsx */; at the top of the file.

Answered by Farrukh Malik on December 15, 2020

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

Answered by kibuniverse on December 15, 2020

You need to install this babel plugin, babel-preset-css-prop

Answered by Lalit Yadav on December 15, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP