盖茨比的情感问题（样式化组件）答案

【问题标题】：Problems with Emotion (Styled Components) on Gatsby盖茨比的情感问题（样式化组件）
【发布时间】：2021-03-11 06:43:04
【问题描述】：

我使用 Emotion 在我的项目中制作样式组件，现在它给我带来了问题。我是这样安装的：

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;

但是当我运行 gatsby develop 时，它给了我这个错误

`WebpackError: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'.

有人可以帮助我吗？

我的 package.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"
  },

还有我的 gatsby-config 文件：

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`,
  ],
}

【问题讨论】：

标签： css reactjs gatsby styled-components emotion

【解决方案1】：

发生这种情况是因为在 Emotion 11 中包名称已更改。我不相信gatsby-plugin-emotion 是最新的，所以这个错误可能来自插件代码。

如果您希望使用您已经编写的代码，请关注the v10 Emotion docs，并在您的package.lock 文件中将@emotion/core 的依赖版本设置为“~10.0.0”。

在 v10 中您不需要 @emotion/react。除非您想使用样式化组件（例如 const Foo = styled("div")`font-size: 14px;`;），否则您不需要 @emotion/styled。

【讨论】：

【解决方案2】：

删除您的@emotion/core 并再次运行npm install。然后在你的组件中使用它们在你的代码中的语法，或者使用类似的东西：

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

【讨论】：