將組件放入react-emotion或styled-component中

Question

import styled from 'react-emotion'

class Field extends React.Component<> {}

export default styled(Field)

然后如果我渲染這個組件並使用component.type ，我得到styled()...函數而不是Field組件。

我如何在樣式函數中獲得Field ？

Answer 1

嘗試這個：

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

導出函數只是導出函數，但我認為你想要組件。 那為什么不呢？

import styled from 'react-emotion'

class Field extends React.Component<> {}

const styledField = styled(Field)

export default styledField

Answer 3

styled庫沒有提供任何獲得Field的方法。 即使它確實Field.type將是undefined因為Field沒有此屬性。 您可以嘗試此代碼並查看：

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

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