ошибка типа, расширение не является функцией в стилизованных компонентах

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;
`