javascript - 在 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.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