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

Question

I have a React component roughly with this structure:

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

That structure seems to work for all other css props but if I include the position prop in the object, I get the following TypeScript errors:

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

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

Passing the position prop directly inline to the css prop works just fine:

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

Any idea of why I can´t include the position prop in the style object?

Hey, I would like to recommend you to have a look at the props. You are assigning value to css prop where as i feel it should be style. — TARJU
– TARJU, Commented Jun 3, 2022 at 7:20
Possible duplicate of stackoverflow.com/questions/46710747/… — TARJU
– TARJU, Commented Jun 3, 2022 at 7:40

Satel · Accepted Answer · 2022-06-02 23:27:21Z

2

It's because you are using plan object value as css prop value for emotion directly. Only direct input of css style object into css prop would work with emotion.

Please check https://emotion.sh/docs/object-styles.

To use css style object, you need to define it as emotion's Style Object using css.

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

answered Jun 2, 2022 at 23:27

Satel

1871 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HigoChumbo Over a year ago

Oh, that seems to do it. Weird, I had always been using plain objects with no issue and only noticed once I had to use the position prop. Thank you!

Sagar Darekar · Accepted Answer · 2022-06-04 15:39:11Z

0

It might be helpful if you show the other attributes you're passing in the styles object. Post the code for the div component and the output of log errors if possible.

Another question, but I don't think this was the main issue: I think it might be a good practice if you use your div component in camelCase syntax, like DivComponent, for example. To avoid confusing it with the div html tag.

edited Jun 4, 2022 at 15:39

Sagar Darekar

1,01611 silver badges15 bronze badges

answered Jun 2, 2022 at 23:06

Marcos Paulo Amorim

1

2 Comments

TARJU Over a year ago

Regarding initial part its very well indicated in the question that when the value is assigned with a general value it works e.g color: 'green' but does not work when another property is added for example position: 'absolute'. One more thing regarding 'DivComponent' there is no mentioning of such component in the original question. What's build the assumption regarding 'DivComponent'.

HigoChumbo Over a year ago

Oh, it's a regular div, I actually don't like the styled component syntax to be honest, it feels a bit inflexible to me.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related