Question

我正在尝试使用样式化组件，但出现以下错误-

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;

Answer 1

更改

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

收件人

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

Answer 2

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

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

类型错误扩展不是样式化组件中的函数

2 个答案: