我有一个问题,代码识别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>
)
}
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
文件中,如下所示:另外请注意,如果您使用Babel的env选项,则每个环境的emotion也必须是第一个:
1.接下来,我将检查ESLint是否已正确配置。通常,如果
css
属性被传递给DOM元素,来自eslint-plugin-react的react/no-unknown-property规则将产生错误。正如official Emotion docs中提到的,这种违反规则的行为可以安全地忽略,因为@emotion/react
在将css
属性应用于DOM元素之前拦截了它。将规则应用于ESLint configuration file,如下所示:
1.最后,如果你使用TypeScript,你需要添加类型声明。我不确定您使用的是哪个CSS-in-JSS框架,因此我将介绍如何为styled-components和emotion执行此操作。
在
root
或src
目录中的某个位置创建一个名为style.d.ts
的类型声明文件。对于
styled-components
:对于
emotion
:在
tsconfig.json
文件中,确保包含新创建的文件:1.如果所有这些都失败了,请阅读官方的Emotion css prop docs,看看您是否可能错过了什么。
希望这能帮助你和任何未来的开发者谁可能会坚持这个!