這是我的代碼

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

這是我得到的錯誤

您試圖從css函數返回字符串對象。它 不應該直接使用(例如，作為類名的值 道具)，而是交給情緒，讓它可以處理它(例如，作為價值 css prop的)。

這個錯誤似乎在告訴我，我需要做我已經在做的事情？還是我漏掉了什么？

只是想說明我有這個問題，添加這個為我修復了錯誤:

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

只是澄清一下，你得加上/* * @ jsx jsx */；在文件的頂部。

這個方法解決了我的問題:

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react"

export default function somepage() {

  const color = 'red'

  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hello World.
  </div>)
}

正如Emotion文檔中所詳述的，使用css屬性要求您將React替換為jsx作為JSX元素的目標函數(稱為“pragma”)，這將使Emotion能夠截取css屬性并將其轉換為React的類名屬性。

例如:

<p>Hi</p>

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

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

有兩種方法可以實現這一點。你只需要選擇一個。如果您能夠在您的應用程序中配置Babel，那么第一種方法是推薦的方法，但是任何一種都可以:

安裝一個Babel插件，將jsx配置為應用程序中所有代碼的默認處理程序

最直接的方法是將相關的巴別塔預設添加到您的巴別塔配置中，如下所示:

// 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"]
}

不過，如果你能做到這一點，我建議你配置babel-plugin-emotion，它包括css prop配置以及其他功能，如縮小、死代碼消除和提升:

// Option 1B —?Better
// Add babel-plugin-emotion to your dev dependencies, then add
// the plugin to your Babel configuration (e.g. .babelrc)
{
  "plugins": ["emotion"]
}

從Emotion導入jsx函數，并使用pragma命令Babel在每個文件的基礎上使用這個導入的函數

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

你需要安裝這個babel插件，babel-preset-css-prop

除了包含@emotion/babel-plugin之外，還有一些我遺漏的配置導致了這個錯誤。

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

& quot導入源& quot:& quot@ emotion/react & quot；失蹤了。添加之后，錯誤消失了，樣式也正確地實現了。

有兩種方法可以開始使用css prop。

巴別塔預設 JSX Pragma 這兩種方法產生相同的編譯代碼。

JSX Pragma 在使用css屬性的源文件的頂部設置jsx pragma。這個選項最適合測試css prop特性，或者在babel配置不可配置的項目中(create-react-app，codesandbox等)。).

/** @jsx jsx */

如果不起作用，請使用:

/** @jsxImportSource @emotion/react */

巴別塔預設 此方法不適用于Create React應用程序或其他不允許自定義Babel配置的項目。請改用JSX雜注方法。

。巴伯爾克

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

不能解決你的問題？考慮閱讀官方文檔: https://emotion.sh/docs/css-prop

/**@jsx jsx */ 從' @emotion/core '導入{ jsx，css }