Css 盖茨比的情感问题（风格化成分）

我用情感在我的项目上制作样式化的组件，现在它给我带来了问题。我是这样安装的：

npm i @emotion/react @emotion/styled gatsby-plugin-emotion

例如，如果我想在Header组件中使用它，我会这样做：

import React from 'react';
import { Link } from 'gatsby';
import Navegacion from './navegacion';
import { jsx, css } from '@emotion/react';

const Header = () => {
  return (
    <header
      css={css`
        background-color: #0d283b;
        padding: 1rem;
      `}
    >
      <div
        css={css`
          max-width: 120rem;
          margin: 0 auto;
          text-align: center;
          @media (min-width: 768px) {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        `}
      >
        <Link>Bienes Raíces</Link>
        <Navegacion />
      </div>
    </header>
  )
}
 
export default Header;

有人能帮我吗

mypackage.json文件

"dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.5.0",
    "gatsby-plugin-emotion": "^4.5.0",
    "gatsby-plugin-manifest": "^2.6.1",
    "gatsby-plugin-offline": "^3.4.0",
    "gatsby-plugin-react-helmet": "^3.4.0",
    "gatsby-plugin-sharp": "^2.8.0",
    "gatsby-source-filesystem": "^2.5.0",
    "gatsby-transformer-sharp": "^2.6.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },

和我的盖茨比配置文件：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    // {
    //   resolve: `gatsby-plugin-manifest`,
    //   options: {
    //     name: `gatsby-starter-default`,
    //     short_name: `starter`,
    //     start_url: `/`,
    //     background_color: `#663399`,
    //     theme_color: `#663399`,
    //     display: `minimal-ui`,
    //     icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
    //   },
    // },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

---

删除您的

@emotion/core

并再次运行

npm安装

。然后，在您的组件中，只需使用与代码中相同的语法，或使用类似以下内容：

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

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

从'@emotion/react'导入{css，jsx}
常量颜色='白色'
渲染(
悬停以更改颜色。
)

之所以发生这种情况，是因为在Emotion 11中，包名发生了更改。我不相信盖茨比插件情感是最新的，所以错误可能来自插件代码

如果您希望使用已经编写的代码，请遵循并在

package.lock

文件中将@emotion/core的依赖项版本设置为“~10.0.0”

在v10中，你不需要@emotion/react。您不需要@emotion/styled，除非您想使用样式化组件（例如

constfoo=styled（“div”）`font-size:14px；`；

）

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

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)