menu
up-caret
down-caret

emotion

Emotion is a css-in-js library focused on performance and developer experience

# General

General Chatter

Trending conversations
Targeting webkit styles
@walterc · 94d
Emotion with server-side rendering
@haf · 41d
Emotion 10 in Gatsby
@closure · 85d
Is there a way to still use extractCritical with V10?
@bram-l · 46d
Use Scss mixins with Emotion
@beth3346 · 12d

Styled Components with Typescript

emotion/General · October 31, 2018 at 3:31pm

Styled Components with Typescript

October 31, 2018 at 3:31pm

I'm facing a problem combining a styled component with typescript.

I create a styled component:

const Main = styled('main')`
font-family: montserrat;
`

When I try to I pass it a children components

render (){
return (
<Main>
<ConnectedControlPanel />
<ResultsArea {...this.props} />
<PaginationContainer />
</Main>
)
}

typescript shows an error:

[ts]
Type '{}' is not assignable to type 'Readonly<Pick<{ displayMode: any; searchMode: any; }, "displayMode" | "searchMode">>'.
Property 'displayMode' is missing in type '{}'.

According to the Emotion website, it includes typescript definitions for this library:

https://emotion.sh/docs/typescript

So I'm not sure why this is happening, or what is the right way to define type for a styled component, that will allow my to pass it children.

Any suggestions?


October 31, 2018 at 6:14pm

have you tried this?

```

const Main = styled('main')`

font-family: montserrat;

` as any

```

  • reply
  • like

November 19, 2018 at 2:50pm

It turns out it doesn't have much to do with Emotion. Issue solved.

  • reply
  • like