typeerror extend 不是样式化组件中的函数答案

【问题标题】：type error extend is not a function in styled componentstypeerror extend 不是样式化组件中的函数
【发布时间】：2019-03-24 12:52:43
【问题描述】：

我正在尝试使用 styled-components 但收到以下错误 -

TypeError: CustomElement.extend is not a function

代码：-

import React, { Component } from 'react';
import './App.css';
import styled from 'styled-components';


const CustomElement = styled.div`
  color: green;
  font-size: 30px;
`

const BlueElement = CustomElement.extend`
  color: blue;
`

class App extends Component {
  render() {
    return (
      <div>
        <CustomElement>
          div
      </CustomElement>
        <BlueElement>
          div
      </BlueElement>
      </div>
    );
  }
}

export default App;

【问题讨论】：

如果它解决了您的问题，请接受给定的答案，以便对未来的读者有所帮助

标签： reactjs styled-components

【解决方案1】：

改变

const BlueElement = CustomElement.extend`
  color: blue;
`

到

const BlueElement = styled(CustomElement)`
   color: blue;
`

【讨论】：

这确实解决了它，但提供一个为什么会很好。

【解决方案2】：

上一个答案显示了如何解决问题，但没有解释为什么解决方案可以解决问题。

CustomElement.extend 函数是 removed in styled components version 4，因此您必须使用版本 4 或更高版本，它不再存在。它被删除是因为它被认为是开发人员混淆的根源（有关更多详细信息，请参阅this issue on Github）。如前所述，您可以使用styled(CustomElement) 来使用更新的版本来扩展您的样式组件。

【讨论】：