将样式对象传递给 Emotion 的 css 道具时使用 css "position" 出现 TS 错误

Question

我有一个 React 组件，大致结构如下：

    // This does not work.
    const style = {
       position: 'absolute'
       // ...other css props
    }
    
    const Component = () => {
       return <div css={style}/>
    }

该结构似乎适用于所有其他 css 道具，但如果我在对象中包含 position 道具，我会收到以下 TypeScript 错误：

Type '{ //... }' is not assignable to type 'Interpolation<Theme>'

Type '{ //... }'is not assignable to type 'undefined'. TS2322

将 position 道具直接内联传递给 css 道具效果很好：

   // This works.
   const style = {           
      // ...other css props
   }
    
   const Component = () => {
      return <div css={{ position: 'absolute', ...style }}/>
   }

知道为什么我不能在样式对象中包含位置道具吗？

Answer 1

如果您显示在样式对象中传递的其他属性，可能会有所帮助。 Post div 组件的代码和日志错误的输出（如果可能的话）。

另一个问题，但我认为这不是主要问题：我认为如果您在驼峰式语法中使用 div 组件可能是一个很好的做法，例如 DivComponent，因为例子。为了避免与 div html 标签混淆。

Answer 2

这是因为您直接将计划对象值用作css情感道具值。只有将 css 样式对象直接输入到 css prop 中才会产生情感。

请检查https://emotion.sh/docs/object-styles。

要使用css样式对象，您需要使用css.

将其定义为情感的样式对象

const style= css({
  position: 'absolute',
  ...otherStyles
})

将样式对象传递给 Emotion 的 css 道具时使用 css "position" 出现 TS 错误

TS error using css "position" when passing style object to Emotion's css prop

emotion

typescript

reactjs

css-in-js