在Emotion Next/JS React应用中发现未知属性“xxx”

gajydyqb 于 2023-04-30 发布在 React

关注(0)|答案(1)|浏览(115)

我有一个问题，代码识别css为@emotion/react，我不知道如何删除这个错误，以使它成功编译构建。如果您能提供关于如何解决此错误的任何帮助，我将不胜感激。谢谢大家。
Yarn Build失败，原因如下：

26:17  Error: Unknown property 'css' found  react/no-unknown-property

我不知道如何让它工作。有没有更好的方法来重写它？

<div
            key={`${config.stakePoolData.pubkey.toString()}`}
            className="flex w-full cursor-pointer gap-4 border-b border-border px-8 py-4 md:flex-row"
            css={css`
              &:hover {
                background: ${config.stakePoolMetadata?.colors?.primary &&
                transparentize( 0.9, config.stakePoolMetadata.colors?.primary
                )};
              }
            `}
            onClick={() => {
              router.push(
                `/${
                  config.stakePoolMetadata?.name ??
                  config.stakePoolData.pubkey.toString()
                }${location.search}`
              )
            }}
            >

下面是更多的代码供参考：

import { shortPubKey } from '@cardinal/common'
 import { css } from '@emotion/react'
 import { ButtonSmall } from 'common/ButtonSmall'
 import type { StakePool } from 'hooks/useAllStakePools'
 import { useRouter } from 'next/router'
 import { transparentize } from 'polished'

 export const CollectionsList = ({ configs }: { configs?: StakePool[] }) => {
  const router = useRouter()
   return (
    <div className="w-full overflow-x-scroll overflow-y-scroll rounded-xl border border- 
     border p-4">
     <div className="flex w-full min-w-fit flex-col">
      <div className="flex w-full gap-4 rounded-xl bg-dark-4 px-8 py-2">
       <div className="flex-1">Image</div>
        <div className="flex-[2]">Collection</div>
         <div className="flex-[2] justify-end text-right"></div>
        </div>
        <div className="flex flex-col">
         {!configs ? (
         <></>
         ) : (          
         [...configs].map((config) => (              
         <div
            key={`${config.stakePoolData.pubkey.toString()}`}
            className="flex w-full cursor-pointer gap-4 border-b border-border px-8 py-4 md:flex-row"
            css={css`
              &:hover {
                background: ${config.stakePoolMetadata?.colors?.primary &&
                transparentize( 0.9, config.stakePoolMetadata.colors?.primary
                )};
              }
            `}
            onClick={() => {
              router.push(
                `/${
                  config.stakePoolMetadata?.name ??
                  config.stakePoolData.pubkey.toString()
                }${location.search}`
              )
            }}
            >              
            <div className="min-w-fit flex-1">
              <div className="flex items-center gap-5 md:flex-row">
                {config.stakePoolMetadata?.imageUrl ? (
                  <img
                    className={`h-full max-h-[50px] max-w-[150px] rounded-xl ${
                      config.stakePoolMetadata.contrastHomepageBkg &&
                      `bg-white bg-opacity-20 p-2`
                    } ${config.stakePoolMetadata?.logoPadding && 'p-3'}`}
                    src={config.stakePoolMetadata?.imageUrl}
                    alt={
                      config.stakePoolMetadata?.name ??
                      config.stakePoolData.pubkey.toString()
                    }
                  />                                            
                ) : (
                  <div className="flex h-[50px] w-[50px] items-center justify-center rounded-full text-lg text-white text-opacity-40">
                    <img
                      className={`h-full max-h-[40px] max-w-[150px] rounded-xl`}
                      src={'/cardinal-crosshair.svg'}
                      alt={config.stakePoolData.pubkey.toString()}
                    />
                  </div>
                )}
              </div>
            </div>
            <div className="flex flex-[2] items-center">
              {config.stakePoolMetadata?.displayName ??
                shortPubKey(config.stakePoolData.pubkey.toString())}
            </div>
            <div className="flex flex-[2] justify-end">
              <ButtonSmall>View</ButtonSmall>
            </div>
          </div>
         ))
        )}
      </div>
     </div>
   </div>
  )
 }

next.js

来源：https://stackoverflow.com/questions/73757885/unknown-property-xxx-found-in-emotion-next-js-react-app

1条答案

按热度按时间

yebdmbv41#

如果没有更多的信息，这可能是由于各种原因造成的。我强烈建议你仔细检查一下official Emotion install docs，仔细检查一下你没有错过任何东西。
我将尝试提供一些建议来帮助你。
1.首先，我确认您已经从项目的root目录中运行了yarn add @emotion/react。
1.如果你手动设置了你的项目（比如webpack），请确保使用@emotion/babel-plugin。您可以使用yarn add --dev @emotion/babel-plugin安装它。只需将@emotion添加到.babelrc文件中，如下所示：

{
  "plugins": ["@emotion"]
}

另外请注意，如果您使用Babel的env选项，则每个环境的emotion也必须是第一个：

{
  "env": {
    "production": {
      "plugins": ["@emotion", ...otherBabelPlugins]
    }
  },
  "plugins": ["@emotion"]
}

1.接下来，我将检查ESLint是否已正确配置。通常，如果css属性被传递给DOM元素，来自eslint-plugin-react的react/no-unknown-property规则将产生错误。正如official Emotion docs中提到的，这种违反规则的行为可以安全地忽略，因为@emotion/react在将css属性应用于DOM元素之前拦截了它。
将规则应用于ESLint configuration file，如下所示：

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

1.最后，如果你使用TypeScript，你需要添加类型声明。我不确定您使用的是哪个CSS-in-JSS框架，因此我将介绍如何为styled-components和emotion执行此操作。
在root或src目录中的某个位置创建一个名为style.d.ts的类型声明文件。
对于styled-components：

import { CSSProp } from "styled-components";

interface DefaultTheme {}

declare module "react" {
   interface HTMLAttributes<T> extends DOMAttributes<T> {
     css?: CSSProp<DefaultTheme>;
   }
 }

对于emotion：

import type { SerializedStyles } from "@emotion/serialize";
import type { DOMAttributes } from "react";

declare module "react" {
    interface HTMLAttributes<T> extends DOMAttributes<T> {
        css?: SerializedStyles;
    }
}

在tsconfig.json文件中，确保包含新创建的文件：

"include": [
    "other.d.ts",
    "src/another.d.ts",
    "style.d.ts",
]

1.如果所有这些都失败了，请阅读官方的Emotion css prop docs，看看您是否可能错过了什么。
希望这能帮助你和任何未来的开发者谁可能会坚持这个！

赞(0）回复(0）举报 2023-04-30

我来回答

在Emotion Next/JS React应用中发现未知属性“xxx”

1条答案

相关问题

热门标签

最新问答