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