Get a component inside an emotion reaction or component style

Question

import styled from 'react-emotion' class Field extends React.Component<> {} export default styled(Field) 

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

How do I get Field inside a stylized function?

Answer 1

Exporting a function is just exporting a function, but I think you need a component. So why not?

 import styled from 'react-emotion' class Field extends React.Component<> {} const styledField = styled(Field) export default styledField 

Answer 2

styled library provides no way to get a field. Even if it is Field.type it will be undefined , since the Field does not 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 

Answer 3

Try the following:

 import styled from 'react-emotion' const Field = ({ className }) => ( <div className={className}>Some field</div> ) const theField = styled(Field)` color: green; ` export default theField