get component inside react-emotion or styled-component

Question

import styled from 'react-emotion'

class Field extends React.Component<> {}

export default styled(Field)

then if I render this component and use component.type , i get styled()... function instead of Field component.

How I get Field inside styled function?

Answer 1

Try this:

import styled from 'react-emotion'

const Field = ({ className }) => (
    <div className={className}>Some field</div>
)

const theField = styled(Field)`
    color: green;
`
export default theField 

Answer 2

Exporting the function is just exporting the function, but I think you want the component. So why not this?

import styled from 'react-emotion'

class Field extends React.Component<> {}

const styledField = styled(Field)

export default styledField

Answer 3

styled library doesn't provide any way to get a Field. Even if it does Field.type will be undefined since Field doesn't have this property. You can try this code and see:

 class Field extends React.Component<> {
  render() {
    return (<div></div>);
  }
}

console.log(Field.type); // this will be 'undefined' not 'div' as you might expect