Next.js React项目@emotion/react css属性报错，Yarn Build失败求助

问题原因 #

ESLint的react/no-unknown-property规则默认不识别Emotion的css属性，因此抛出"Unknown property 'css' found"错误，中断构建。

解决方法 #

方法1：修改ESLint配置，忽略css属性 #

在项目的ESLint配置文件（如.eslintrc.json、.eslintrc.js）中，给react/no-unknown-property规则添加忽略项：

{
  "rules": {
    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
}

方法2：改用Emotion的styled组件写法 #

避免直接在原生div上使用css属性，转而定义styled组件：

1. 导入styled：

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

2. 定义带样式的组件：

const CollectionItem = styled.div`
  flex: 1;
  width: 100%;
  cursor: pointer;
  gap: 4px;
  border-bottom: 1px solid var(--border-color); // 替换为项目中对应border-border变量的实际值
  padding: 4px 8px;
  flex-direction: column;

  @media (min-width: 768px) {
    flex-direction: row;
  }

  &:hover {
    background: ${props => props.primaryColor ? transparentize(0.9, props.primaryColor) : 'transparent'};
  }
`

3. 在渲染中使用该组件：

<CollectionItem
  key={`${config.stakePoolData.pubkey.toString()}`}
  primaryColor={config.stakePoolMetadata?.colors?.primary}
  onClick={() => {
    router.push(
      `/${
        config.stakePoolMetadata?.name ??
        config.stakePoolData.pubkey.toString()
      }${location.search}`
    )
  }}
>
  {/* 子元素内容保持不变 */}
</CollectionItem>

方法3：配置Emotion的Babel插件（需使用Babel的项目） #

确保Emotion的Babel插件正确配置，让ESLint能识别css属性：

1. 安装依赖：

yarn add @emotion/babel-plugin --dev

2. 修改Babel配置文件（如babel.config.js）：

module.exports = {
  presets: [/* 项目已有的presets */],
  plugins: ["@emotion/babel-plugin"]
}

3. 安装并启用ESLint的Emotion插件：

yarn add eslint-plugin-emotion --dev

4. 更新ESLint配置：

{
  "plugins": ["emotion"],
  "rules": {
    "emotion/no-unknown-property": "error"
  }
}

内容的提问来源于stack exchange，提问作者Justin Lucas